Pause Animation Controls

This can be used for new builds or existing work with animations. You should always test the animations you are using to see if it works with this component. If not, please look at the detailed notes below on how to have your animations support this component.

This solution described below is available as an NPM module. (Module installation instructions)

Pause all the CSS, Canvas, Video, SVG SMIL, and GIF animations on this page with the checkbox at the top of this page. The CSS, Video, and SVG SMIL animations don't know anything about the checkbox. The Canvas and GIF animations only require a small amount of setup to work.

(Note: if you have set your operating system to Reduce Motion, it will be checked by default, and animations on the page will not play until the checkbox is unchecked)

Quick Start guide

Just download the script and include it at the end of the body:

After that, just include it in the bottom of your page. The control to pause the animations must be structured the following way:

For animated GIFs or WEBP, you will have to structure your HTML a certain way (see the animated GIF example below for details).

How Does It Work

The TL;DR:

• When the page loads, the script checks to see what the OS setting for animations is (via the prefers-reduced-motion media query).
• If prefers-reduced-motion media-query is set to "reduce", the script turns off the animations and checks the checkbox by default.
• If the checkmark is checked, the class pause-anim-control__prefers-reduced-motion is set on the body tag. Otherwise, the body tag has the pause-anim-control__prefers-motion class set. These classes are used to pause and play CSS and GIF/WEBP animations.
• The script does some extra magic to turn off the other animations (see below).

Code walkthroughs

This section will show how the script stops the different types of animations.

CSS Animations

The animation of Saturn from one of my previous blog posts that appears above is animated via CSS.

Pausing requestAnimationFrame Animations

Most Canvas Animations (like this great elastic collision demo from Ana Tudor) rely on code using requestAnimationFrame() to produce a frame of animation. When the checkbox is checked, we just set window.requestAnimationFrame to a dummy function, and set it back when the checkbox is unchecked. The animation below wasn't made with pausing in mind ... my pause script "just made it work".

SMIL Animation Demo

The animation below (made by the talented Lenka from their CodePen of this demo) uses SMIL to animate the SVG. Note that although there was a lot of noise about SMIL being deprecated in Chrome, this deprecation was suspended (i.e. it is still a web standard and will continue to be in the foreseeable future, due to pushback from the web development community).

Animated GIF/WEBP Example

Unlike SVG SMIL animations, there is no browser API to pause GIF/WEBP animations. This script works around this by allowing the developer to include two different renditions of the image: one animated, the other not. CSS is then used to hide and show each rendition according to the user's preference.

(If you are looking for a way to add pause buttons on GIF animations, please take a look at the animated gif pause button examples).

Vanilla HTML5 Video

Videos embedded by the video tag can be paused automatically by the script as well. Note that when the user unchecks the "Pause animations" checkbox, the videos will only start playing if they were playing when the checkbox was originally checked.

AblePlayer

Since AblePlayer plays videos Note that when the user unchecks the "Pause animations" checkbox, the videos will only start playing if they were playing when the checkbox was originally checked. (Since this video does not autoplay, you must play it first and then check the "Pause Animations" checkbox to test it properly)

Making scrollIntoView() Respect the Pause Control

It is possible to make a DOM element's scrollIntoView() method respect the setting of the pause control. You will notice that all the code walkthroughs will not animate when changing steps and the "Pause animations" control is checked. This part of the code shows you how this works:

Installation Instructions

You can load this JavaScript library into your application in several ways:

• as an ES6 module using Webpack.
• as a CommonJS module using require() and Webpack.
• as a native ES6 module within the browser.
• as an old-school ES4/JavaScript library.

If you haven't done so already, choosing which you should use is a major architectural decision. Here are a few articles that will help you decide:

• Jan Olaf Krems gives a great overview of the JavaScript file format differences.
• Joe Honton discusses that with ES modules and HTTP/2, you may not need Webpack anymore
• Stack Overflow has a really good thread about Webpack vs. ES6 modules as well.

Important Note on the CSS Classes Used in This Module:

This module requires specific CSS class names to be used in order for it to work correctly. These CSS classes begin with pause-anim-control__. Please see the documentation above to see where these CSS classes are inserted.

Using NPM/Webpack to load ES6 Modules:

1. Install the enable-a11y NPM project.
2. Edit your webpack.config.json file to resolve the ~ modifier by adding the following:
   Wrap text

   ☜ Scroll to read full source ☞

   module.exports = { ... resolve: { extensions: ['.js', '.jsx', '.scss', '.css', '*.html'], modules: [ path.resolve('./src/js'), path.resolve('./node_modules') ], alias: { '~enable-a11y': path.resolve(__dirname, 'node_modules/enable-a11y') }, ... }, ... }
3. You can use the module like this:
   Wrap text

   ☜ Scroll to read full source ☞

   // import the JS module import pauseAnimControl from '~enable-a11y/js/modules/pause-anim-control'; // import the CSS for the module import '~enable-a11y/css/pause-anim-control'; // How to initialize the pauseAnimControl library pauseAnimControl.init();
4. Alternatively, if you are using LESS you can include the styles in your project's CSS using:
   Wrap text

   ☜ Scroll to read full source ☞

   @import '~enable-a11y/css/pause-anim-control';
   (If you are using it in your CSS, you will have to add the .css suffix)

Using NPM/Webpack to Load Modules Using CommonJS Syntax

1. Install the enable-a11y NPM project.
2. You can import the module using require like this:
   Wrap text

   ☜ Scroll to read full source ☞

   var pauseAnimControl = require('enable-a11y/pause-anim-control').default; ... pauseAnimControl.init();
3. You will have to include the CSS as well in your project's CSS using:
   Wrap text

   ☜ Scroll to read full source ☞

   @import '~enable-a11y/css/pause-anim-control';

Using ES6 modules natively.

This is the method by which the page you are reading now loads the scripts.

1. Grab the source by either using NPM, grabbing a ZIP file, or cloning the enable source code from GitHub.
2. If you want to load the module as a native ES6 module, copy js/modules/pause-anim-control.js , and css/pause-anim-control.css from the repo and put them in the appropriate directories in your project (all JS files must be in the same directory).
3. Load the CSS in the head of your document:
   Wrap text

   ☜ Scroll to read full source ☞

   <html> <head> ... <link rel="stylesheet" href="path-to/css/pause-anim-control.css" > ... </head> <body> ... </body> </html>
4. Load your scripts using the following code (NOTE: you must use <script type="module">):
   Wrap text

   ☜ Scroll to read full source ☞

   <script type="module"> import pauseAnimControl from "path-to/pause-anim-control.js" pauseAnimControl.init(); </script>

Using ES4