raymondseger / freezeframe.js

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.

Freezeframe.js

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/

4.x

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:

• freezeframe
• vue-freezeframe
• react-freezeframe

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

• Browserstack - Live, Web-Based Browser Testing