Animations — love them or hate them? Your choice!

BBC iPlayer — CSS — prefers-reduced-motion

We love putting animations on the iPlayer website, as we believe they make for a smoother, more enjoyable experience and they make the website feel more alive! However, we know not everyone is a fan of animations, not even subtle decorative animations. For some, even just a small animation can trigger motion sickness. If you’re one of those people, or just want to turn off animations to save a little battery power or CPU usage, you can now turn off (most) animations on iPlayer!

Let’s give it a go. How do I turn off animations?

The various operating systems (e.g. Android, iOS, Windows or macOS) all have their own way of requesting animations be turned off. For example, on an Android device, (depending on your model), you might find an option called “Remove animations” in the Accessibility section of your device settings, and on macOS, you will find a checkbox labelled “Reduce motion” in the Display section of the Accessibility settings in System Preferences.

How does it work?

It’s all down to a relatively new CSS Media Query — prefers-reduced-motion.

A media query is a bit of CSS that allows for querying features and preferences of the user’s browser/device.

For example, you might recognise this kind of simple media query:

@media only screen and (min-width: 600px)  {
  // CSS code here only runs on browsers/devices
  // that have a viewport of at least 600px wide.
}

Here’s an example of the prefers-reduced-motion media query:

@media (prefers-reduced-motion: reduce) {
  .my-button {
    animation: none;
  }
}

In this example, we’re setting the animation of all button elements to none, removing any animations previously set on elements with the class my-button.

It is also possible, with a caveat, to do the opposite, applying styles when the user has not set a preference:

// this will only work on browsers that support this media query
@media (prefers-reduced-motion: no-preference) {
  .my-button {
    animation: my-animation 0.3s;
  }
}

However, the big caveat with this is that it will only work on browsers that support this media query, meaning users on older browsers that don’t support it will not see your animation. So, unless you mind killing off animations on all but the most recent browsers, you’ll have to go with the first solution and see turning animations off as a progressive enhancement:

.my-button {
  animation: my-animation 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .my-button {
    animation: none;
  }
}

What about JavaScript?

As this new feature is just a media query, we can use window.matchMedia — a JavaScript method which can be used to determine whether a CSS media query matches the current state or not. We can therefore use it to determine the user’s motion preference:

window.matchMedia('(prefers-reduced-motion: reduce)').matches

To prevent errors in older browsers that don’t support window.matchMedia, you can check for that first. A helper function might look like this:

function prefersReducedMotion() {
  return window.matchMedia && 
    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}

This then enables you to do things like this:

function onScrollToTopClick() {
  if (prefersReducedMotion()) {
    scrollDirectlyToTop();
    return;
  }
  return scrollToTopWithAnimation();
}

Where can I try it out on iPlayer?

As with any new feature or web technology, it will take a while to add this to the existing components on the site and to embed it in the development process of new components. However, we have started rolling it out and you can try seeing how the setting on your device affects the following:

• Moving your mouse over programme links on the homepage and across the site
• Sliding the carousels left and right on the homepage and across the site
• The autoplay countdown when you finish watching a programme
• The Channels and Categories navigation dropdown at the top of the site

Join us

If you’re excited by the things we’re doing to improve accessibility and you value dedicated time to learn and improve your craft in software engineering, then do get in touch as we’re always hiring. You can see all our job listings for BBC iPlayer & Sounds here.