Skip to main content Accessibility Feedback

Reduced Motion Media Query

The Reduced Motion media query provides a way for people who experience motion sickness and vertigo to specify that they’d like to reduce the motion of an interface.

Reader Daniel Post shared some code he uses to implement this on his sites.

Daniel’s codes is written in ES6 and Sass. Here’s the ES5 and CSS version.

JavaScript

if (window.matchMedia('(prefers-reduced-motion)')) {
    // Handle JavaScript differently
    document.documentElement.className += ' reduced-motion';
}

CSS

.some-component {
    animation: all 2s ease-in;
}

.reduced-motion .some-component {
    animation: none 0s ease-in;
}

Without JavaScript

Daniel’s approach requires JavaScript, which is fine when modifying JS components.

But for CSS, a simple media query does the same thing and works even if the JavaScript fails, fails to load, or loads after an animation has started.

.some-component {
    animation: all 2s ease-in;
}

@media (prefers-reduced-motion) {
    .some-component {
        animation: none 0s ease-in;
    }
}