Combine Multiple Images Into A Gif – GiffyImages

GiffyImages is a JavaScript library that combines multiple pictures into a playable image just like an animated GIF.

How to use it:

1. Download and import the GiffyImages library.

<script src="./dist/giffy-images.min.js"></script>

2. Insert images into the GiffyImages container. Don’t forget to hide the images on page load except the first one.

<div id="giffy-images-container">
  <img width="150" src="1.jpg" alt="Img 1">
  <img style="display: none;" width="150" src="2.jpg" alt="Img 2">
  <img style="display: none;" width="150" src="3.jpg" alt="Img 3">
  <img style="display: none;" width="150" src="4.jpg" alt="Img 4">
  <img style="display: none;" width="150" src="5.jpg" alt="Img 5">
</div>

3. Initialize the GiffyImages on the top container.

const giffyImages = new GiffyImages({
      imageHolderId: 'giffy-images-container'
})

4. Play & pause the ‘GIF’.

giffyImages.playStop()

5. Or auto play the Gif after all images have been loaded.

const giffyImages = new GiffyImages({
      imageHolderId: 'giffy-images-container',
      autoplay: true,
})

6. Customize the animation speed. Default: 50.

const giffyImages = new GiffyImages({
      imageHolderId: 'giffy-images-container',
      speed: 200,
})