Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually.
https://ctrl-freaks.github.io/freezeframe.js/
Freezeframe is now built in 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 the TypeScript beta:
npm install [email protected]npm install [email protected]# react typescript re-write coming soon
# npm install [email protected]Version 4+ is built with modern javascript in mind. It's transpiled with webpack/babel, so it should work in most environments, but we are no longer supporting the jquery plugin.
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:
To get started with freezeframe, head over to the core freezeframe package.
To use freezeframe with Vue.js, check out the vue-freezeframe docs.
React users should give react-freezeframe a try.
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.
- 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 build- If you are part of the ctrl-freaks organization, you can publish directly to npm:
lerna publishOtherwise, submit your PR for review.
freezeframe.js is released under the terms of the MIT License.