Skip to content

Instantly share code, notes, and snippets.

@danielpost

danielpost/main.css

Last active October 28, 2018 20:01
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danielpost/2477d1881d9b267b39756068f09be5d2 to your computer and use it in GitHub Desktop.
Save danielpost/2477d1881d9b267b39756068f09be5d2 to your computer and use it in GitHub Desktop.
Download ZIP
Reduce motion on your website if it's enabled by the user (https://css-tricks.com/introduction-reduced-motion-media-query/)
Raw
main.css
.some-component {
:not(.reduced-motion) & {
animation: animation-name 3s linear infinite;
}
}
Raw
main.js
((window, document, undefined) => { // eslint-disable-line
/**
* On DOM ready. We use an unnamed function here to make sure 'this'
* equals document.
*/
document.addEventListener('DOMContentLoaded', function () { // eslint-disable-line
/**
* Handle reduced motion #a11y.
*
* If reduced motion is enabled, we add the .reduced-motion class
* to the <html> tag, which we can then target in JS or CSS.
*/
{
const motionQuery = window.matchMedia('(prefers-reduced-motion)');
if (motionQuery.matches) {
document.documentElement.classList.add('reduced-motion');
}
}
});
})(window, document); // eslint-disable-line
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment