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;
    }
}

🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips