No-Motion-First Approach
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 thoughtsThank 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
Advanced Web Design in 2003
This book gives me a glimpse of how a person built an advanced web design in the year around 2003. In a nutshell, it was complicated.
By Vanza Setia
Pope Francis Is Not a Christian
Pope Francis is not a holy person. In fact, he has done many evil works. Let us see his fruits together.
By Vanza Setia