Animation from Interactions makes sure users can turn off these animations. One way to do that is with the “prefers-reduced-motion” setting, available in most web browsers. Websites and apps don’t always respect this setting, but now that you know, you can help make the web a better place.
Who this impacts
- People with motion sensitivities: Animations triggered by scrolling, hovering, or clicking can cause nausea, dizziness, or discomfort for users with vestibular disorders.
- People with cognitive disabilities: Sudden or unexpected animations can overwhelm or distract users, making it harder to focus on content.
- Everyone: Turning off animations can create a more streamlined, distraction-free experience.
How to meet Animation From Interactions
- Respect user preferences for reduced motion: Use system or browser settings, such as “prefers-reduced-motion,” to automatically reduce or disable animations based on user preferences.
- Offer manual control: If system preferences aren’t available, provide users with an easy way to turn off or reduce animations triggered by interactions.
- Test interactions with and without animations: Ensure your website remains fully functional and usable even when animations are disabled or reduced.
Top tips
- Use system preferences: Automatically reduce or eliminate animations if users have set their system or browser to “prefers-reduced-motion.”
- Test without animations: Make sure the website remains fully usable and clear even when all animations are disabled.
- Minimize unnecessary animations: Ask yourself if you really need that animation, and don’t use animations that serve no functional purpose or are purely decorative.