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

🔥 Hot off the press! I just launched a new pocket guide. Learn about ES6 arrow functions, let and const, function hoisting, and more.

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