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 preferred and simplest way of embedding animated GIFs: only have them animate if the user explicitly wants to see them.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.
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.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.
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.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.