Reduce motion
Reduced motion: who uses it, how to support it, and how to test it
“Reduce motion” is the OS setting that tells apps and websites to calm their animations down. When it's on, a well-built interface trades sliding, zooming, and parallax for quiet fades, or holds still entirely. Here's who relies on it, how to support it, and how to check your own work.
Who turns it on and why it matters
Motion on a screen isn't neutral. For people with vestibular disorders — the inner-ear system that governs balance — large parallax scrolls, zoom transitions, and spinning loaders can trigger genuine dizziness, nausea, and disorientation, not mild annoyance. Vestibular dysfunction is common: it becomes more prevalent with age, and a meaningful share of adults experience it at some point.
Others reach for the setting because motion competes for attention: people with ADHD or migraine sensitivity, anyone prone to visual overwhelm, and plenty of people who simply find aggressive animation exhausting. Every modern OS exposes the toggle — macOS, iOS, Windows, and Android all have it — and browsers relay the choice to the web through a media feature.
How to support it
The goal isn't a dead, static interface — it's calmer motion. Motion that conveys meaning (a menu that clearly comes from the button you pressed, a state change you'd otherwise miss) can stay, as long as it's small and doesn't move large areas of the screen. A common fix is to swap distance-based motion for opacity: a fade instead of a slide, a cut instead of a zoom.
.toast {
animation: slide-up 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.toast {
animation: fade-in 300ms ease;
}
}<!-- Override: slide by default, fade when reduced -->
<div class="animate-slide-up motion-reduce:animate-fade-in">...</div>
<!-- Opt in: fade by default, slide only when safe -->
<div class="animate-fade-in motion-safe:animate-slide-up">...</div>How to test it on a Mac
The setting lives in System Settings → Accessibility → Display → Reduce motion. Toggle it on, then reload your site and walk through every animated moment: page loads, scroll reveals, route changes, hovers, loaders, and modals. What you're checking is that decorative motion has calmed or stopped while essential feedback still reads.
Alternatively, the Cases menu bar app lets you flip reduced motion and other settings without the trip into System Settings.
Test reduced motion without digging through system settings
Cases puts this and four more macOS settings in your menu bar, just a click away.