Animate (SOME) of the GIFs!

Not all GIFs are created equal. Some just need a little help.

I haven't posted more than once in a day in a while, but I'm really excited about my little interactive images kick from earlier.

I got links to work on top of an animated GIFs. After cracking my knuckles, I decided to see if I could push myself a little more. Now, I want an image with some instruction text to play an animated GIF on the hover, not jump out to a link. This is all hobby for me, by the way. Lots of coding and refreshing going on to get it working.

The first thing I needed to do was lay out my HTML tree and CSS skeleton

Now, I needed some more information. Problem number one: get the first frame of an animated GIF to use as a static placeholder in the page. Not too hard. I hopped into GIMP, and then copied and exported my first frame as a jpg image to hang out on its own.

Now, the hard part was to get the text to show up in the right place. You can use absolute positioning, but then your div elements can get all wonky. On a static HTML page, it isn't too hard to do because you control everything. On a blog, it can be messy because you're fighting with your template's CSS and if you don't use the right attribute names or calls, you can end up with a poor layout. So, to make things easier, I just used GIMP to throw some instruction text on to my first frame placeholder.


Now came the tricky part. I had to make sure I layered my images correctly in the HTML and CSS. After adding the correct links and the correct frame sizes, I had the following code:

And the result is:


One thing I'm still trying to work out is how to get the animation to pause when you move the mouse. Because a GIF is just an image, I don't think there is a way to have the loop paused without some serious coding in the background. I've already poked through StackOverflow a little, and can't seem to find anything promising. With this method, the GIF will continue to loop in the background after the initial hover, so you'll see a little jump.

Why? Animations can be annoying in the corner of your eye. Giving people control over whether or not they want to see some moving pictures is a courtesy. Plus, I wanted to see if I could do it. So there.

5 thoughts on “Animate (SOME) of the GIFs!

  1. johnjohnston says:

    Hi Brian,
    I love this, it seems to me that the gif becomes invisible when you stop hovering, so I do the animation does disappear when I move the mouse out of the images, I don’t get bothered by the jump. Somewhere I saw some javascript that pulled frames out of a gif, but seems like too much overhead for this?

    anyway very cool.

    • Yeah, because it’s looking for the mouse event, it will only play when you have the mouse over the new box you create. All the mouse is doing is telling the CSS to display the animation. I did see some JavaScript wonk which allows you to keyframe, but you have to upload all of those images to the server and call them in sequence. I’m not opposed to doing that, I just haven’t dug in deep enough yet.

      Were you the one who linked an mp3 to start playing when you clicked on a GIF using HTML5? I’ve been meaning to play with that, too.

      • johnjohnston says:

        nice as it is I think. Yep I did the sound/gif stuff, JS. I wonder if sprites could give a pausable ‘gif’? I did a wee test of a png sprite hat looks like a gif: Not an animated gif could perhaps pause and restart…

        • I did find one SO article which linked to a Codepen demo (broken) with all the JS and CSS in place. It seems like sprites are the only way to get the pause effect. I just need to take an evening and dig in…I’ve never used sprites so I’ll have a lot of reading to do.

  2. […] off this: Educator, Learner | Animate (SOME) of the GIFs! – Educator, Learner And recalling this: Not an animated […]

Leave a Reply

Your email address will not be published. Required fields are marked *