animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
https://animate.style/
Other
80.3k stars 16.23k forks source link

Add option to "disable" prefers-reduced-motion media query. Designers / Developers should have the power to decide depending on context. #1628

Closed bs-thomas closed 1 year ago

bs-thomas commented 1 year ago

Is your feature request related to a problem? Please describe.

Yes.

We are web developers, and due to the way we use our operating systems, we disable all the crappy Windows animation we don't want. However, when that is disabled, we found that the latest version 4 of animate.css, the animation automatically goes away with that. But we need those animation, not just on websites we develop, but also when browsing other websites.

We found that this "forced disabling" of the animation in the whole library is a bit inconvenient for us, and also frustrating experience for some of our clients who has their computer optimized from dumb Windows animations, but prefers a cool looking website with nice animation.

OS is about productivity, websites are about creativity. It's two different things. Disabling animations along with operating system options takes away the flexibility for us developers to make a reasonable decision. Or, imagine if a web developer uses your library for game development. They will end up not being able to play the game if the computer OS turned off animations.

I mean, we are not going to abuse it. If a website abuses has abusive animation, the problem is the developer, not the animation library.

For instance, nobody told you to use a knife to stab a person. It's made for cutting Kobe Wagyu Beef! Does that make sense?

Describe the solution you'd like.

Having a fallback option for developers like us would be very useful, so I would like to make this feature request, and kindly hope that you will consider re-adding a fallback option for those who indeed need the animation in there even with the OS animations disabled.

Thank you very much!

Describe alternatives you've considered.

There aren't too many options. We cannot force animation to always appear always as well, as I'm sure there are scenarios where developers think the animaton should be disabled along with the OS. The option and power should go to the developer to decide.

My suggested option covers both scenarios, allowing the developers to decide.

The easiest way out is to make a modifier class (eg. "enable-prefers-reduced-motion") on the body to enable "prefers-reduced-motion" only if asked. This will be the least CSS to achieve it. Although this may sound like a "breaking breage", since the whole initial assumption with this change is that all animations are optional (which I disagree with), there isn't really anything breaking. The users of the library will start seeing the animations again. Developers who don't want that happening, just add a class "enable-prefers-reduced-motion" to the body, and there ya go, works for both scenarios.

Thank you very much!

Additional Context

No response

eltonmesquita commented 1 year ago

I understand your concerns and frustration but this is a non-negotiable feature. Accessibility comes first and many people aren't able to use some websites due to the lack of this accessibility feature in websites. Motion sickness and other motion-related issues are very real and much more common than you think. Ultimately, the power to disable them should be in the hands of the end user, and an OS level control is the appropriate place for this.

I'm closing this as there have been lots of discussions about it in the past