Facebook Style GIF Player & Previewer – gifsee.js

gifsee.js is a small JavaScript GIF player plugin which allows to play / stop animated GIFs with preview images. Similar to Facebook’s.

Installation:

npm install gifsee

How to use it:

Import the minified version of the gifsee.js library into the html page.

<script src="js/gifsee.js"></script>

Don’t forget the main style sheet:

<link rel="stylesheet" href="css/gifsee.min.css">

Insert the animated GIF file into the webpage using data-gifsee attribute. The original src attribute is used to specify the path to the preview image.

<img src="1.png" 
     data-gifsee="1.gif"
>

Initialize the gif player.

var myimg = new gifsee(document.querySelectorAll('img'));