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

Author: louisonCreated May 7, 2024Updated Aug 19, 2026

Labelsbug

**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:

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 [email protected]

Source: motiondivision/motion

View original on GitHub View discussion on GitHub