motiondivision / motiondivision/motion
[BUG] `analyseComplexValue` function incorrectly parses `matrix3d` transform function into a number
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
1. Read the FAQs 👇
2. Describe the bug
analyseComplexValue function incorrectly parses matrix3d transform function into a number, leading to incorrect keyframes generation:
// Console warning given by framer motion
Invalid keyframe value for property transform: matrix2.99999d
Workaround: Providing an initial transform: matrix3d to the motion element solves the problem
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
Here is the CodeSandbox reproducing the bug:
- Sandbox: https://codesandbox.io/p/sandbox/matrix3d-framer-motion-bug-k8yqmf
- Standalone: https://k8yqmf.csb.app/
A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.
4. Steps to reproduce
Steps to reproduce the behavior:
- Open the CodeSandbox
- Run the CodeSandbox into a new tab (Warning will not show inside the Sandboxed Chrome DevTools)
- Inspect the new tab and open the Chrome DevTools console
- Multiple warnings should be displayed (see screenshot) like :
dom-entry-S0VUm9c0.js:2936 Invalid keyframe value for property transform: matrix0d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)
animateStyle @ dom-entry-S0VUm9c0.js:2936
Show 1 more frame
Show less
dom-entry-S0VUm9c0.js:2936 Invalid keyframe value for property transform: matrix-0.00789d(-0.00263, 0, 0, 0, 0, -0.00263, 0, 0, 0, 0, -0.00263, 0, 0, 0, 0, -0.00263)
animateStyle @ dom-entry-S0VUm9c0.js:2936
Show 1 more frame
Show less
dom-entry-S0VUm9c0.js:2936 Invalid keyframe value for property transform: matrix-0.03158d(-0.01053, 0, 0, 0, 0, -0.01053, 0, 0, 0, 0, -0.01053, 0, 0, 0, 0, -0.01053)
animateStyle @ dom-entry-S0VUm9c0.js:2936
Show 1 more frame
Show less
dom-entry-S0VUm9c0.js:2936 Invalid keyframe value for property transform: matrix-0.0627d(-0.0209, 0, 0, 0, 0, -0.0209, 0, 0, 0, 0, -0.0209, 0, 0, 0, 0, -0.0209)
animateStyle @ dom-entry-S0VUm9c0.js:2936
Show 1 more frame
Show less
dom-entry-S0VUm9c0.js:2936 Invalid keyframe value for property transform: matrix-0.09354d(-0.03118, 0, 0, 0, 0, -0.03118, 0, 0, 0, 0, -0.03118, 0, 0, 0, 0, -0.03118)
animateStyle @ dom-entry-S0VUm9c0.js:2936
Show 1 more frame
Show less
dom-entry-S0VUm9c0.js:2936 Invalid keyframe value for property transform: matrix-0.11716d(-0.03905, 0, 0, 0, 0, -0.03905, 0, 0, 0, 0, -0.03905, 0, 0, 0, 0, -0.03905)
animateStyle @ dom-entry-S0VUm9c0.js:2936
Show 1 more frame
Show less
dom-entry-S0VUm9c0.js:2936 Invalid keyframe value for property transform: matrix-0.12673d(-0.04224, 0, 0, 0, 0, -0.04224, 0, 0, 0, 0, -0.04224, 0, 0, 0, 0, -0.04224)
animateStyle @ dom-entry-S0VUm9c0.js:2936
Show 1 more frame
Show less
dom-entry-S0VUm9c0.js:2936 Invalid keyframe value for property transform: matrix-0.11591d(-0.03864, 0, 0, 0, 0, -0.03864, 0, 0, 0, 0, -0.03864, 0, 0, 0, 0, -0.03864)
animateStyle @ dom-entry-S0VUm9c0.js:2936
Show 1 more frame
Show less
dom-entry-S0VUm9c0.js:2936 Invalid keyframe value for property transform: matrix-0.07874d(-0.02625, 0, 0, 0, 0, -0.02625, 0, 0, 0, 0, -0.02625, 0, 0, 0, 0, -0.02625)
5. Expected behavior
Parse the matrix3d keyword entirely instead of parsing the number 3 as an integer
6. Video or screenshots
7. Environment details
- Tested on Chrome and Safari on MacOS, iOS and Android
- Tested with
framer-motion@11.1.9
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/framer-motion/src/value/types/complex/index.ts at analyseComplexValue and reproduce the parsing problem using the linked CodeSandbox. Verify that the matrix3d keyword is parsed entirely rather than treating its 3 as a number, and confirm the invalid transform keyframe warnings no longer occur.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100