A little while back, the always excellent Umar Hansa posted the following advice on Twitter for how to turn off animations when a user prefers reduce motion:
- code block from his tweet
- flawed solution = animation: none - https://twitter.com/umaar/status/1261084050707619840?s=20
- Explain how a user indicates they prefer reduced motion
- link to research that motion can cause seizures, etc
This approach makes perfect sense, right? If you want to turn off all animations, set them to none
. Declare that there shall be no animating.
There’s a subtle problem with just skipping all your animations, though.
The problem with no animations
If your website includes animations, you probably want to display your content wherever it normally lands at the end of its animation.
For example, what if one of your animations takes an invisible piece of content and animates it into view?
- flaw = traps in initial state (which may be opacity: 0, etc)
Show gif or codepen or code sandbox (or similar) or code block of animating a box in
If that content starts out invisible, skipping the animation that turns it visible will accidentally trap it in its initial invisible state forever. Oops! That’s the subtle problem with animation: none
.
There’s another way to accomplish what we’re after, though.
Using quick animations instead
- better solution = duration: 0 - https://twitter.com/ooloth/status/1266093837891637253
Strange as it may seem, to skip animations, what you really want is for animations to complete instantly rather than not running at all.
By completing your animations quickly, you accomplish the same goal (no visible movement), but avoid the problem of trapping elements in their beginning state (e.g. opacity: 0
).
Instead, each element immediately appears in its post-animation state, as though the animation ran and is now finished.
Code example (use latest version from cw repo and chris coyier’s article)
So, that’s how you can easily remove all motion from your website for users who prefer reduced motion.
Should we disable all movement?
Smart people like Chris Coyier and Adam Argyle have recently pointed out that reduced motion does not necessarily mean no motion at all.
- Mention css tricks article arguing against it
- Mention Adam argyle arguments against it
While liberal use of animation can cause issues for users who are sensitive to motion, a completely lack of movement can make a website harder to understand. While some animations are purely for fun, others quite intentionally mimic real life physics and do their best to give elements the appearance of having mass and responding the same way real world objects would. This can make a website more intuitive and be helpful for those with cognitive challenges, or a general unfamiliarity with digital landscapes.
This is especially true when new elements appear onscreen. In real life, elements with size don’t just appear out of nowhere. They approach from a specific direction and decelerate as they arrrive. Including some amount of motion like this can help some users understand your website more easily.
So, the extent to which you should remove vs. reduce motion on your website certainly deserves some thought.
Completely removing all motion isn’t the only approach to take. While it will make your website easier to use for some, it will make your website more difficult to use for others.
I still think this method is a good option to start with if you and your team want to do something to recognize users’ preferences and don’t currently have time to individually customize the movement of each element.
Links
- Tweet by Umar Hansa that inspired this post: https://twitter.com/ooloth/status/1266093837891637253?s=20
- Repo I got the declaration from
- Adam Argyle tweet/article/podcast about this
- CSS tricks post about this
- Respecting Users’ Motion Preferences — Smashing Magazine
Inbox
- flawed solution = animation: none - https://twitter.com/umaar/status/1261084050707619840?s=20
- flaw = traps in initial state (which may be opacity: 0, etc)
- better solution = duration: 0 - https://twitter.com/ooloth/status/1266093837891637253?s=20