Toggling Animations On and Off, a Variation

In the post Toggling Animations On and Off Kirupa Chinnathambi does a great job of outlining the value in giving users a choice over seeing animations. Part of that is by honoring preferences users have already made in their operating systems to reduce the amount of animation they see.

I don’t have any revelation to add nor corrections to make, but I do want to show an alternate method to provide the checkbox to toggle the animations. A checkbox and default animation state that both change based on the user’s settings.

I started by forking a silly snow globe I made at Codepen. It is probably the most inaccessible playing around I have shared in a while, but it was a good base for this example. Then I added a few features. I embedded the pen below, but you can visit Snow Globe That Offers Motion Choice at Codepen if the embed is broken.

See the Pen Snow Globe That Offers Motion Choice by Adrian Roselli (@aardrian) on CodePen.

First I use the prefers-reduced-motion media query to disable the animation.

@media (prefers-reduced-motion: reduce) {
  div,
  div:hover,
  div:focus {
    animation: none;
  }
}

Now the animation will not play for users who have indicated they don’t want to see it. Then instead of JavaScript to read the button state, I use a :checked selector and a couple sibling selectors to enable the animation.

@media (prefers-reduced-motion: reduce) {
  #Start:checked + label + div {
    animation: SNOW 12s linear infinite;
  }
  #Start:checked + label + div:hover,
  #Start:checked + label + div:focus {
    animation: WIGGLE 0.1s ease-in-out infinite alternate;
  }
}

I also want to give other users without that operating system setting (or a browser that supports it) an opportunity to disable my auto-playing animation. I start by adding another checkbox. Now my HTML has two checkboxes.

<input type="checkbox" id="Stop"><label for="Stop"> Stop animation</label>

<input type="checkbox" id="Start"><label for="Start"> Play animation</label>

Obviously I don’t want my non-reduced-motion users to see the checkbox to play the animation, so I hide it for them. Just as I don’t want my reduced-motion users to see the other one to stop the animation. Just make sure to re-enable it as appropriate.

#Start,
#Start + label {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  #Stop,
  #Stop + label {
    display: none;
  }
  #Start,
  #Start + label {
    display: initial;
  }
}

With that out of the way, we can now disable the animation for users who check the box, though with a slightly longer selector.

#Stop:checked + label + input + label + div {
  animation: none;
}

I know that seems a bit scattered, so let me recap:

• Make a checkbox to stop the animation,
• Make a checkbox to play the animation,
• Use CSS to hide the checkbox to play the animation,
• Make a media query to detect if the user prefers reduced motion,
• In the media query hide the checkbox to stop the animation,
• In the media query show the checkbox to play the animation,
• Use :checked with adjacent sibling selectors to affect the appropriate change.

There are many ways to simplify this code. I chose not to use JavaScript because it wasn’t necessary, but it may be necessary for your needs. I opted to use my checkbox styles from my post Under-Engineered Custom Radio Buttons and Checkboxen.

In the following two images, I show how the pen looks first for a user with default settings, and then for a user who has activated the setting to reduce motion.