Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually.
http://ctrl-freaks.github.io/freezeframe.js/
Freezeframe is now written in / supports TypeScript! The library will still support usage in JavaScript, but if your project uses TypeScript, you'll have access to Freezeframe's type definitions, improved input validation, and depending on your IDE/text editor, autocompletion/intellisense.
To get started using freezeframe 5:
npm install freezeframenpm install vue-freezeframenpm install react-freezeframenpm install angular-freezeframeVersion 5+ is built with modern development in mind. It's transpiled from TypeScript to JavaScript, and it should work in all modern browsers, but we are no longer supporting older browsers, or the jquery plugin.
If you need to support older browsers (and don't need TypeScript), try v4.x:
npm install freezeframe@4.1.3If you want to use freezeframe as a jquery plugin, check out freezeframe v3.0.10.
This is a lerna.js monorepo, containing the following packages, each with their own docs:
For the curious, we are able to pause animated gifs by writing their data to a canvas element. Only the first frame of the animation can be written to the canvas, so we now have a frozen version of the gif.
Unfortunately, browser security prevents reading the actual data of the image if it is hosted on a different domain, which prevents us from being able to truly "pause" the gif on the true current frame. Supporting gifs on other domains is a requirement for this project, so the only frame you can pause on is the first frame.
- Fork or clone the repository
- Install lerna globally (optional)
npm install -g lerna- Install the monorepo dependencies
npm install- Install the sub-package dependencies
npm run bootstrap- Run tests for all sub-packages
npm test- Run build for all sub-packages
npm run buildThen, submit your PR for review.
freezeframe.js is released under the terms of the MIT License.