Press "Enter" to skip to content

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.

playpause gif javascript, how to control gif animation in html, js gif player, how to add gif in javascript, gif player with controls, trigger gif animation, javascript gif editor

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 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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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