No-Motion-First Approach

Vanza Setia,

Estimated reading time: 1 minute

For animations and transitions, take a no-motion-first approach. That means you write all the animations and transitions inside the @media (prefers-reduced-motion: no-preference).

This way, the users who choose to see them will be able to see them. Then, if the users' browsers do not support the prefers-reduced-motion media query, they will not see them, and that is fine—as long as the animations are not needed to understand the page. As a result, all users of old browsers do not see any animations and transitions, and users of modern browsers can see the animations if they choose to.

Using this approach, you are doing a progressive enhancement and making the website accessible at the same time.

As a side note, the idea is not coming from me. It is coming from Taking a no-motion-first approach to animations.

Share your thoughts

Topic(s).

Thank you for reading this No-Motion-First Approach. You can subscribe to all my articles with the Articles RSS. If you have a positive or negative comment, please send me an email or contact me through one of my social media accounts.

Share with your network

Copy this link and send it to great people only.

https://vanzasetia.xyz/blog/no-motion-first/

For you