Animated GIF Player In Pure JavaScript | freezeframe.js

Freezeframe.js is a library that pauses animated/gif files and enables them to be moved on mouse hover/mouse click/touch event, or to be triggered manually. freezeframe JS is a premium touch JavaScript / jQuery GIF player that allows us to play a handcrafted frame animated GIF with custom trigger events/elements.

Supports responsive images and touch events on a mobile phone. It is heavily based on Html5 Canvas technology.


How to make use of it:

1. Install the package and import the freezeframe as an ES module.

# Yarn
$ yarn add freezeframe

$ npm i freezeframe --save
import Freezeframe from 'freezeframe';

2. Load the freezeframe.min.js script from local.

<script src="dist/freezeframe.min.js"></script>

3. Add the CSS class freezeframe to the GIF picture or a container and include a group of GIF photos as follows.

// Add Image Here

<div class="freezeframe">
  // Add Images Here

4. Initialize the freezeframe.js plugin and completed it.

new Freezeframe();

5. Set the trigger event to play/pause the GIF animation.

new Freezeframe({
    trigger: 'click'

6. Add a play button to the GIF picture.

new Freezeframe({
    overlay: true

7. Play/pause the GIF animation manually.

const manual = Freezeframe({
      trigger: false


8. Make the picture fully responsive.

new Freezeframe({
    responsive: true

9. Override the default selector.

  selector: '.another'

// or
  // options here

Animated GIF Player Plugin With Vanilla JS, javascript gif player, Freezeframe.js Plugin/Github

See Demo And Download

Official Website(ctrl-freaks): Click Here

This superior jQuery/javascript plugin is developed by ctrl-freaks. For extra Advanced Usage, please go to the official website.