juanfran / 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/

v5 - TypeScript

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.

Packages / Documentation

This is a lerna.js monorepo, containing the following packages, each with their own docs:

• freezeframe
• vue-freezeframe
• react-freezeframe
• angular-freezeframe

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.

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

Then, submit your PR for review.

License

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

Thanks

• Browserstack - Live, Web-Based Browser Testing