Respecting the "keep motion subtle" setting

So far we’ve gathered the tools for adding motion to a page. The last thing to learn is the fact that some people find that motion hard, and how to be considerate toward them. There’s a way to deliver your motion only to the people who want it, without wasting a single line of what you made.

Some people find motion hard

Large motion on screen can cause symptoms like dizziness or motion sickness for some people. It’s a physical response, not something people can fix by putting up with it. That’s why each OS provides a setting to keep motion subtle.

• iPhone/iPad: Settings → Accessibility → Motion → “Reduce Motion”
• Windows: Settings → Accessibility → Visual effects → turn off “Animation effects”
• Mac: System Settings → Accessibility → Display → “Reduce motion”

The browser of a person who has this setting turned on sends the page a cue that says “please reduce motion.”

The cue arrives via a media query

You receive the cue the same way you changed the look by screen width: with @media. It’s just that the condition changes from “screen width” to “the user’s setting.”

.fade-in {
  animation: fade-in 0.8s ease both;
}

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

It means “normally play the fade-in animation. But don’t play it for people with the reduce-motion setting.”

Let’s see it move

In real life the browser responds to the OS setting automatically, but in this demo we switch it artificially with a button.

A copy-paste snippet that stops everything at once

Stopping motion one at a time is the basic approach, but there’s also a way to stop the whole page’s motion all at once.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

* is a selector that means “all elements.” It’s handy, but also heavy-handed.

How to check without changing your setting

Opening the OS setting again every time is a hassle. The browser’s developer tools also have a feature to switch it artificially. In Chrome, open “More tools” → the “Rendering” tab, and you can toggle prefers-reduced-motion under the “motion” item. You can check the look right there without changing your device’s setting.

Make motion a decoration that “reads fine without it”

The most fundamental measure is to make it so that, from the moment you build it, the content gets across even without motion. Motion is seasoning; never let the information itself depend on motion alone. This idea is the same as the color rule of not relying on color alone.

Summary of this lesson

1. Some people get sick from motion on screen, and the OS has a “reduce motion” setting
2. Receive that cue with @media (prefers-reduced-motion: reduce) and stop it with animation: none and the like
3. The basic rule of etiquette is to build motion as decoration, so the content still gets across without it

That wraps up the web animation course. transition, transform, @keyframes, combining with triggers, and this time’s way of being considerate—you now have a full set of both the tools of motion and the mindset. Start with your page’s most prominent buttons and cards, and add motion little by little.