Enable (some) animations even if the user prefers reduced motion about auto-animate HOT 5 CLOSED

We've been discussing this internally — I'm not sure making animations less distracting is the direction we want to go in. Partially because "less distracting" is a very subjective metric and partly because the way the prefers-reduced-motion option is described on many operating systems is "disable motion".

That said, we think there may be times when it makes sense to override the existing behavior but with a verbose pejorative option name much in the way React allows dangerouslySetInnerHTML. Current favorite is:

cost [ref] = useAutoAnimate({
  disrespectUserMotionPreference: true
})

from auto-animate.

This is available: https://auto-animate.formkit.com/#configuration

from auto-animate.

A general enabled or disabled option (#27) could work as well and would leave the decision to disable potentially distracting animations to the library users.

const prefersReducedMotion = usePrefersReducedMotion()
const [ref] = useAutoAnimate({ disabled: prefersReducedMotion })

from auto-animate.

+1 to this!

In my use case, I work in a company that sets reduced motion as default for all computers, however in some cases we need to enforce animation, to make list transitions clearer.

I can submit a PR if necessary.

The package is currently unusable because of this, but I would love to switch all my manual animations with this godsend of a library.

from auto-animate.

Yeah I'd like to request this too, and I also want to recommend adding a button on the main website demo/#examples/showcase section to enable animations even if reduced mode is enabled.
I don't like to change my whole system settings in order to only check the demos, and even worse, the whole time I'm developing using this library... I'm personally an animations-off guy on my own system, but I am "requested" to use animations in some projects, so... .
Thank you.

from auto-animate.