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

  • Christians May Not Be Around

    Where are Christians? Can I find them?

    By Vanza Setia

    christianity

  • Good Gamers Beat AI

    Developers are talking about Chat Generative Pre-trained Transformer (ChatGPT), the good and the bad things about it. But when I see it from a gamer's perspective, it is interesting.

    By Vanza Setia

    mind