[BUG] animate() automatically disables all transform & layout animations when device has "reduced motion" preference

[pedroalmeida415]

1. Read the FAQs 👇
✅

2. Describe the bug
When the user’s device has reduced motion enabled, animations using the “animate()” function default to not animating properties related to movement at all, and the following message appears in the console:
You have Reduced Motion enabled on your device. Animations may not appear as expected. warnOnce @ warn-once.mjs:9

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/sandbox/bitter-meadow-8f8hrv

4. Steps to reproduce

1. Enable reduced motion on your device
2. Visit the codesandbox
3. Notice how opacity animation works as intended, but the transform defaults to not animating at all

5. Expected behavior
It should be up to the developer which animations to turn off if reduced motion is detected. There’s even examples in the framer-motion documentation on how to do that.

6. Video or screenshots
N/A

7. Environment details
Enable reduced motion according to your system