Animated image module allow users to convert a set of images stored in a single image into an animation. Live example.

Mode of use:

First, you need to join several images into one using some software. Images must be joined vertically and they must have the same height.

Once you have that image, you can include it using the following code:

<img class="animated-image" src="your-image.png" images="5" interval="2" />

The attributes this module can use are:

  • The images attribute indicates how many images contains the file you want to animate.
  • The interval attribute indicates how many seconds do you want to wait between each frame of the animation. You can use decimal values to make the animation change faster. If this attribute is not defined, 1 second will be used by default.

Besides listed attributes you can also define some behaviors by using some classes:

  • pause-on-click: allows users to pause and resume the animation by clicking on the image.
  • paused: the animation will start paused. You may want to combine this class with the pause-on-click.


  • <img class="animated-image" src="your-image.png" images="5" />
  • <img class="animated-image" src="your-image.png" images="5" interval="1" />
  • <img class="animated-image pause-on-click" src="your-image.png" images="5" interval="1" />
  • <img class="animated-image paused pause-on-click" src="your-image.png" images="5" interval="1" />

Why images must be joined vertically?

Some themes restrict the width of the page, this affects the dimension of the images and the math used to calculate where is the next image frame located.

How can I join multiple images?

If you want to use an online tool, just search for "join multiple images online". There are a several free services to join images.

If you are using Linux, you can use:

convert -append myimages*.png result.png

Project information