Link

freezeframe.js

freezeframe.js is a modern JS library that uses canvas to easily allow the pause and play of GIF animations.

Direct Link →

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

npm install freezeframe

yarn

yarn add freezeframe

CDN

If not, you can pull in the library from a CDN:

<script src="https://unpkg.com/freezeframe/dist/freezeframe.min.js"></script>

# 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.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

All comments are held for moderation and only published when on topic and not rude. You'll even get little stars if you do an extra good job.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.

icon-search icon-link