Animating a gif on hover

When a page has many gif images, you’d prefer to play them upon certain user action: over the image, click on the picture or some button, slider scroll, etc. There are several possible options on how to implement this. Let’s take a look at the most popular ones:

1. Image substitution.
The idea here is to promptly substitute a static image with the animated gif upon some event. Let’s assume we use image click event.

Here’s the code:

Same thing for the “hover” event:

Note that in our example we use jQuery 1.9.1.

2. Using a third-party library.
A quick and simple way to animate a gif upon some event is to use an appropriate library. I personally prefer freezeframe.js https://github.com/ctrl-freaks/freezeframe.js.
There’s a detailed instruction with samples available there.

3. Conversion of gif image to a video file.
This option can be applied if you want to reduce the gif file size. Remember, there are still low-speed networks and bandwidth limits out there, especially on mobile devices.
The conversion may reduce the size up to 90% or even more. In one of our cases, we had a 2.4Mb file which appeared to be around 250Kb after the conversion.
The conversion may be done in various ways: online conversion tools, FFmpeg library. For example, here:
http://www.files-conversion.com
http://www.online-convert.com