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/

5.x TypeScript beta

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 freezeframe@5.0.0-beta.1

npm install vue-freezeframe@5.0.0-beta.1

# react typescript re-write coming soon # npm install react-freezeframe@5.0.0-beta.1

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.

Packages

This is a lerna.js monorepo, containing the following packages:

Documentation

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.

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.

Contributing

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 publish

Otherwise, submit your PR for review.

License

freezeframe.js is released under the terms of the MIT License.

Thanks