[Feature Request] Prefers Reduced Motion
See original GitHub issueWe should be inclusive to those who prefer reduced motion, including those who are prone to motion sickness or are epileptic by adding CSS classes to reduce animations where there is a prefers-reduced-motion media query. The article uses the following code snippet as an example of how it could look:
/*
If the user has expressed their preference for
reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
Issue Analytics
- State:
- Created 4 years ago
- Comments:8
Top Results From Across the Web
prefers-reduced-motion - CSS: Cascading Style Sheets | MDN
The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of ...
Read more >prefers-reduced-motion: Sometimes less movement is more
The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it ...
Read more >"prefers-reduced-motion" | Can I use... Support ... - CanIUse
CSS media query based on a user preference for preferring reduced motion (animation, etc). ... CSS at-rule: @media : prefers-reduced-motion media feature.
Read more >Revisting prefers-reduced-motion - CSS-Tricks
While prefers-reduced-motion is relatively new, CSS features and functionality ... It will work when a person has requested a reduced motion ...
Read more >Respecting Users' Motion Preferences - Smashing Magazine
The `prefers-reduced-motion` media query has excellent support in all modern ... will require more of a user's data than a static image).
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

you can set
autoplay: falseto render only the first frameEnded up using
goToAndPlay(lastFrame, true)