Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually.
v5 - TypeScript
To get started using freezeframe 5:
npm install freezeframe
npm install vue-freezeframe
npm install react-freezeframe
npm install angular-freezeframe
If you need to support older browsers (and don't need TypeScript), try v4.x:
npm install firstname.lastname@example.org
If you want to use freezeframe as a jquery plugin, check out freezeframe v3.0.10.
Packages / Documentation
This is a lerna.js monorepo, containing the following packages, each with their own docs:
How it works
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
- Install the sub-package dependencies
npm run bootstrap
- Run tests for all sub-packages
- Run build for all sub-packages
npm run build
Then, submit your PR for review.
freezeframe.js is released under the terms of the MIT License.