Latest

Author: mattgperry

CHANGELOG.md

@@ -4,6 +4,12 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [12.0.4] 2025-01-24
+
+### Fixed
+
+-   Fix scale correction for CSS variables.
+
 ## [12.0.3] 2025-01-23
 
 ### Fixed

packages/framer-motion/package.json

@@ -110,7 +110,7 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "34.7 kB"
+            "maxSize": "34.75 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",

packages/framer-motion/rollup.config.mjs

@@ -1,13 +1,13 @@
+import alias from "@rollup/plugin-alias"
 import resolve from "@rollup/plugin-node-resolve"
-import { terser } from "rollup-plugin-terser"
 import replace from "@rollup/plugin-replace"
-import dts from "rollup-plugin-dts"
-import alias from "@rollup/plugin-alias"
 import path from "node:path"
+import dts from "rollup-plugin-dts"
+import preserveDirectives from "rollup-plugin-preserve-directives"
+import { terser } from "rollup-plugin-terser"
 import { fileURLToPath } from 'url'
-import pkg from "./package.json" with { type: "json"}
+import pkg from "./package.json" with { type: "json" }
 import tsconfig from "./tsconfig.json" with { type: "json" }
-import preserveDirectives from "rollup-plugin-preserve-directives";
 
 const config = {
     input: "lib/index.js",

packages/framer-motion/src/projection/node/create-projection-node.ts

@@ -1948,7 +1948,7 @@ export function createProjectionNode<I>({
             for (const key in scaleCorrectors) {
                 if (valuesToRender[key] === undefined) continue
 
-                const { correct, applyTo } = scaleCorrectors[key]
+                const { correct, applyTo, isCSSVariable } = scaleCorrectors[key]
 
                 /**
                  * Only apply scale correction to the value if we have an
@@ -1967,7 +1967,16 @@ export function createProjectionNode<I>({
                         styles[applyTo[i]] = corrected
                     }
                 } else {
-                    styles[key] = corrected
+                    // If this is a CSS variable, set it directly on the instance.
+                    // Replacing this function from creating styles to setting them
+                    // would be a good place to remove per frame object creation
+                    if (isCSSVariable) {
+                        ;(
+                            this.instance as unknown as HTMLElement
+                        ).style.setProperty(key, corrected as string)
+                    } else {
+                        styles[key] = corrected
+                    }
                 }
             }
 

packages/framer-motion/src/projection/styles/scale-correction.ts

@@ -1,7 +1,13 @@
+import { isCSSVariableName } from "../../render/dom/utils/is-css-variable"
 import { ScaleCorrectorMap } from "./types"
 
 export const scaleCorrectors: ScaleCorrectorMap = {}
 
 export function addScaleCorrector(correctors: ScaleCorrectorMap) {
-    Object.assign(scaleCorrectors, correctors)
+    for (const key in correctors) {
+        scaleCorrectors[key] = correctors[key]
+        if (isCSSVariableName(key)) {
+            scaleCorrectors[key].isCSSVariable = true
+        }
+    }
 }

packages/framer-motion/src/projection/styles/types.ts

@@ -8,6 +8,7 @@ export type ScaleCorrector = (
 export interface ScaleCorrectorDefinition {
     correct: ScaleCorrector
     applyTo?: string[]
+    isCSSVariable?: boolean
 }
 
 export interface ScaleCorrectorMap {