Myth: Prefers reduced motion means no motion

There is an all-in-one article including every part from this series (if you want prefer to read it all at once instead of "by installments")

---

This is more of developers' good intentions based on a misconception. We (myself included) found an option to reduce motion, and we "brute-force" our way through it, cancelling all transitions and animations like this:

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

Not everything is black or white. There are many shades of grey, and not all animations and transitions are bad. Some of them are worse than others.

We don't need to cancel every motion on a website. Instead, we need to think through them, check what's appropriate and not, and provide an expanded/animated experience for everybody.

In An Event Apart, Val Head had a great presentation about accessibility and animation. In the video, she explains different animations and transitions and which ones are better when trying to avoid triggering a negative reaction: color changes, opacity fades, small movements...

Also, related to this myth, reduced motion applies to more than just animations and transitions: background videos, animated GIFs, or scroll behavior are examples of things that need changes when the user opted for reduced motion. So let's not forget them.