Christian Heilmann

Testing your animations for “prefers-reduced-motion” support

Friday, June 26th, 2020 at 4:55 pm

Motion turned off in MacOS

Animations and transitions are things that can make a product feel much more natural and welcoming. They can also be a great way to make slow processes feel faster. But not everybody is OK with seeing animations and they can overwhelm people or – when done wrongly – even cause nausea and seizures.

That’s why operating systems allow users to turn off animation and your web animations should comply with that decision.

Checking for animation support with ‘prefers-reduced-motion’

Luckily, this is not tough to do, as you have a CSS media query that fires when a user chose to turn off animations. In order to make your animations play nicely with that setting you can un-do any animation inside this media query.

You can see this example in this codepen.


See the Pen
Considerate animation using prefers-reduced-motion
by Christian Heilmann (@codepo8)
on CodePen.


.turtle {
  font-size: 50px;
  animation: move 1s infinite linear alternate;
}
@keyframes move {
  to { transform: translate(200px, 0);}
}
@media (prefers-reduced-motion: reduce) {
  .turtle { animation: none; }
}

Alternatively, you can also wrap any animation inside the positive media query:

.turtle { font-size: 50px; }
 
@media (prefers-reduced-motion: no-preference) {
  .turtle {
    animation: move 1s infinite linear alternate;
  }
  @keyframes move {
    to { transform: translate(200px, 0);}
  }
}

You can even use it in a link element to avoid any CSS related to animations to be loaded:

<link rel="stylesheet" href="animations.css"
      media="(prefers-reduced-motion: no-preference)">

For JavaScript animations, you can use matchMedia to test if animations are wanted.

const wantsanimation = window.matchMedia('(prefers-reduced-motion: reduce)');
wantsanimation.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript based animations.
});

How to test your animations using developer tools

Testing your animations for compliance with your users’ settings can be annoying as you need to turn the setting on and off in your Operating System. There is, however, an easier way to do it, using Chromium developer tools.

As described in the Edge Developer Tools documentation, you can simulate the support for animations

You can see this in action in this video :

The steps are described in the documentation . You either use keyboard shortcuts CMD/CTRL+Shift+i to open devtools, CMD/CTRL+Shift+P to open the Command Menu and type “reduce” followed by enter to toggle the setting. Or you can use the menu, select the … menu up top and navigate to “More Tools” -> “Rendering” where you scroll down to the “Emulate CSS media feature prefers-reduced-motion” to toggle the setting.

If that is too complex, I’d love to hear where you’d expect this functionality to live in the developer tools! Reach out to me via Twitter at codepo8 or directly to EdgeDevTools.

Further reading

Share on Mastodon (needs instance)

Share on BlueSky

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

160: Graphs and RAGs explained and VS Code extension hacks Graphs and RAG explained, how AI is reshaping UI and work, how to efficiently use Cursor, VS Code extensions security issues.
159: AI pipelines, 10x faster TypeScript, How to interview How to use LLMs to help you write code and how much electricity does that use? Is your API secure? 10x faster TypeScript thanks to Go!
158: 🕹️ Super Mario AI 🔑 API keys in LLMs 🤙🏾 Vibe Coding Why is AI playing Super Mario? How is hallucinating the least of our worries and what are rules for developing Safety Critical Code?
157: CUDA in Python, Gemini Code Assist and back-dooring LLMs We met with a CUDA expert from NVIDIA about the future of hardware, we look at how AI fails and how to play pong on 140 browser tabs.
156: Enterprise dead, all about Bluesky and React moves on! Learn about Bluesky as a platform, how to build a React App and how to speed up SQL. And play an impossible game in the browser.

My other work: