[BUG] Animations no longer support non-pixel values for keyframes

[SamP692]

1. Read the FAQs 👇

2. Describe the bug

Prior to version 5.0.0, animation keyframes would accept non-pixel values. After installing version 5.0.0, non-pixel will always throw "Keyframes must be of the same dimension as the current value" when used inside an array of keyframes.

Eg.

animate={{ width: ["0px", "100px"] }} works, but animate={{ width: ["0%", "100%"] }} does not.

I could not locate any documentation suggesting this behavior was intentionally deprecated.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

CodeSandbox Example

The example has a "Working Version" component and a "Broken Version" component.

The dependency version can also be rolled back to pre-5.0.0 in CodeSandbox to show the "Broken Version" working.

4. Steps to reproduce

1. In a React project, install version 4.1.17 of framer-motion
2. Define a motion.div that animates its width, using <motion.div style={{ /* some styles that'll display the div */ }} animate={{ width: ["0%", "100%"] }}
3. Confirm that application does not crash when attempting to render the motion.div instance
4. Install framer-motion version 5.0.0
5. Reload the application (including any necessary rebuilding), without making any other changes
6. Confirm that the application crashes when attempting to render the motion.div instance

5. Expected behavior

motion components accept non-pixel based keyframes as they have in the past.

6. Video or screenshots

N/A

7. Environment details

OS: MacOS Big Sur (11.6)
Browser: Chrome 95.0.4638.54

[mattgperry]

Definietly not intended, thanks for the report!

[ndimatteo]

Getting the same issue when going from 'auto' to 0, which used to work perfectly.