Carbon: Support prefers-reduced-motion for skeleton states
Some people feel sick when they experience unexpected motion on the web.
The skeleton states animations may be a problem for these people.
There's a relatively new media query called prefers-reduced-motion that was introduced by Apple in Safari, and is supported in Firefox, and soon to be supported in Chrome.
Please consider supporting this so that if a user chooses the "Reduce Motion" setting in their browser/OS, the skeleton states remain static and they do not animate.
- CSS Tricks Article: _"An Introduction to the Reduced Motion Media Query"_
- MDN Documentation
- including an example that is supported in Safari, Firefox, and the upcoming Chrome 74
carmacleod
All 10 comments
Agreed @carmacleod! Thanks for bringing this up! We should support this up in Carbon elements too so that any motion guidance for IDL comes with this built-in, too 👍
joshblack
on 27 Mar 2019
cc @shixiedesign
joshblack
on 27 Mar 2019
Just FYI, Chrome 74 has landed, and it does contain the prefers-reduced-motion media query.
carmacleod
on 24 Apr 2019
We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.
![stale[bot] picture](https://avatars3.githubusercontent.com/in/1724?v=4&s=40)
stale[bot]
on 9 May 2019
Not stale. I'd like to get this in soon. Upping the severity as well.
@carbon-design-system/design
dakahn
on 4 Jun 2019
Seems like a good idea. @dakahn @joshblack what specifically do you need from design to move forward on this?
aagonzales
on 6 Jun 2019
Yes but enhancement. Will backlog for July project cycle.
shixiedesign
on 6 Jun 2019
@aagonzales I believe we just want agreement that this is something we'd want to support on the design side, meaning that this is a valid way to represent the Carbon Design System for this user preference (reduced motion).
On the dev side, this would mean that any motion token or curve defaults to instant when this preference is enabled.
joshblack
on 7 Jun 2019
In case it's helpful: a recent post about prefers-reduced-motion:
https://www.scottohara.me/note/2019/07/12/reduced-motion-video.html
carmacleod
on 3 Sep 2019
This is an important enhancement. Thanks for sharing that link @carmacleod
dakahn
on 4 Sep 2019
Related issues
ahoyahoy
·
3Comments
ConradSchmidt
·
3Comments
kalyanixraut
·
3Comments
AnthumChris
·
3Comments
emyarod
·
3Comments
Most helpful comment
In case it's helpful: a recent post about prefers-reduced-motion:
https://www.scottohara.me/note/2019/07/12/reduced-motion-video.html