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.

gif-player-freezeframe

How to make use of it:

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

# Yarn
$ yarn add freezeframe

# NPM
$ 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
  ...
</div>

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
});

manual.start();
manual.stop();
manual.toggle();

8. Make the picture fully responsive.

new Freezeframe({
    responsive: true
});

9. Override the default selector.

Freezeframe({
  selector: '.another'
});

// or
Freezeframe('.another',{
  // 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.

Share