Enable

Animated GIFs with Pause Buttons

All the examples here are useful for new and existing work where you want to pause animated GIFs in the most straightforward way.
Warning: All animations are currently paused because of the Pause Animations Control at the top of the page being checked.

If you are going to have animated Gifs that are longer than 5 seconds on your page, you really should have a pause button on them. Not only do users with ADHD find them distracting, the vast majority of users find them annoying.

I am one of them. Don't get me wrong: I loves GIF memes as much as anyone. But when I'm trying to read the content on an e-commerce site, I will leave if some baby is dancing all over the place elsewhere on the screen. I find it really annoying.

Animated GIFs also use up unnecessary battery power.

All users should be able to pause animated GIFs. What follows is a simple way to implement this feature, since it is not built-in functionality with the <img> tag (although, you think it would be right now, given animated GIFs have been around since Netscape Navigator 2.0).

The ideas in this demo were stolen from this CodePen by Steven Faulkner. The pause first example was from Chris Coyier.

Animation off by default

This is the prefered and simplest way of embedding animated GIFs: only have them animate if the user explicitly wants to see them.

A drawing of a man running
Animated: A drawing of a man running

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Animation on by default

When you implement this way, you are presuming the user loading this webpage is okay with the extra battery power being used to animate this image. It is not a very nice thing to assume. I hope your mom is proud of you.

A drawing of a man running
Animated: A drawing of a man running

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Animation off when OS prefers reduced motion.

This is the only example on this page that does require JavaScript. It detect whether the OS has "reduced motion" turned on by default. If it is, then it keeps the details widget closed.

A drawing of a man running
Animated: A drawing of a man running

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞