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

  • One Action

    One action is better than two actions. The more actions your users are required to do, the more code you need to write too—think about that.

    By Vanza Setia

    a11y

  • Labubu

    Lisa has given an order to millions of stupid people to buy garbage.

    By Vanza Setia

    stupidity