[FEATURE] Flag to instantly finish animations

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

Hi all. We over at @getsentry use framer-motion (it’s amazing!). We also do visual regression testing on our PRs, which means we generate screenshots from selenium based acceptance tests, then visually compare the screenshots against the screenshots generated from master.

For the screenshot comparisons, we have to make sure all animations are disabled. For framer motion We’ve added a testableTransition utility, which we then wrap all of our transition values with. The idea is that it just sets the transition type to false essentially disabling the animation.

This has generally worked, but we’ve noticed some places where the screenshots produce minorly different results between runs. You can see one here https://storage.googleapis.com/sentry-visual-snapshots/getsentry/sentry/6ad776199421d49c927f23c0a62877b96ad348e5/index.html. Maybe it is related to inconsistencies in how the browser renders elements on a gpu accelerated layer?

I was wondering if there was any better way to globally “disable” animations in framer motion.

Describe the solution you’d like MotionConfig could have an option to force framer motion to never “animate” anything, and always immediately transition states. This would be nicer than having to remember to always use testableTransition.

Open to any ideas. Thanks for this incredible library!

[mattgperry]

We would quite like something like this in Framer too so I might be able to take a look in the next couple

[adam-thomas-privitar]

Yeh we really need this. I appreciate the attempt at sensible accessibility defaults when always or user is used – but this options is also famously useful for testing, but only when it completely disables animations. MotionConfig needs a new prop like reducedMotionMode that can be set to all-animations or something.