Remix.run Logo
w4rh4wk5 6 days ago

My rule of thumb: if the user has to wait for the animation to play out, before they can continue, remove it.

And, always provide an accessibility option to turn off all animations.

pverheggen 6 days ago | parent [-]

Worth noting, the prefers-reduced-motion media query is great for this:

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

w4rh4wk5 6 days ago | parent [-]

Interesting. Apparently browsers (at least Firefox) uses the OS' setting for this. I still have animations enabled in Windows 10 due to how windows are rendered when they are opened, but the content isn't painted yet.

However, there seems to be way to set this manually in Firefox. [1] Go to about:config and add `ui.prefersReducedMotion` set to `1`. Can be verified with https://animate.style

[1] https://stackoverflow.com/a/59709067