freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.
MIT License
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 freezeframe
npm install vue-freezeframe
npm install react-freezeframe
npm install angular-freezeframe
Version 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 [email protected]
If 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.
npm install -g lerna
npm install
npm run bootstrap
npm test
npm run build
Then, submit your PR for review.
freezeframe.js is released under the terms of the MIT License.