freezeframe.js is a modern JS library that uses
canvas to easily allow the pause and play of GIF animations.
# Installation in easy.
If your project supports ES6 modules or commonjs modules, install via npm or yarn:
npm install freezeframe
yarn add freezeframe
If not, you can pull in the library from a CDN:
# Setup is a cinch.
Once freezeframe.js is installed, it’s as easy as adding the
freezeframe class (or your own custom selector) to the GIFs you’d like control over.
<img class="freezeframe" src="image.gif" />
Multiple GIFs in a single container?
It’s also possible to put the
freezeframe class on a parent element containing as many GIFs as you want:
<div class="freezeframe"> <img src="image1.gif"> <img src="image2.gif"> <img src="image3.gif"> </div>
Need more advanced configuration? Check out their documentation for public methods, custom integration and more.