Olga Drabashevskaya's blog

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.

Subscribe to RSS - Olga Drabashevskaya's blog