motiondivision / motiondivision/motion

[BUG] `analyseComplexValue` function incorrectly parses `matrix3d` transform function into a number

Open Beginner friendly
#2,654 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

Here:
https://github.com/framer/motion/blob/89cf0dcaeebf92583c6c56c26f4550e7e2a45432/packages/framer-motion/src/value/types/complex/index.ts#L41

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:

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:

  1. Open the CodeSandbox
  2. Run the CodeSandbox into a new tab (Warning will not show inside the Sandboxed Chrome DevTools)
  3. Inspect the new tab and open the Chrome DevTools console
  4. 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

image

7. Environment details

  • Tested on Chrome and Safari on MacOS, iOS and Android
  • Tested with framer-motion@11.1.9

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.