Only add "transform" to will-change (#2818)

* Updating * Updating test * Fixing ssr will-change * fixing tests * Updating size limits
motiondivision · Oct 3, 2024 · dc9d6b3 · dc9d6b3
1 parent f41b701
commit dc9d6b3
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 39 deletions.
diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json
@@ -110,23 +110,23 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "34.02 kB"
+            "maxSize": "33.95 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
             "maxSize": "5.9 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "17.1 kB"
+            "maxSize": "17 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
             "maxSize": "29.1 kB"
         },
         {
             "path": "./dist/size-rollup-animate.js",
-            "maxSize": "17.9 kB"
+            "maxSize": "17.8 kB"
         },
         {
             "path": "./dist/size-rollup-scroll.js",

diff --git a/packages/framer-motion/src/animation/__tests__/css-variables.test.tsx b/packages/framer-motion/src/animation/__tests__/css-variables.test.tsx
@@ -105,7 +105,6 @@ describe("css variables", () => {
             {
                 "--a": "20px",
                 "--color": "rgba(0, 0, 0, 1)",
-                willChange: "auto",
             },
         ])
     })

diff --git a/packages/framer-motion/src/motion/utils/use-visual-state.ts b/packages/framer-motion/src/motion/utils/use-visual-state.ts
@@ -14,9 +14,8 @@ import {
     isControllingVariants as checkIsControllingVariants,
     isVariantNode as checkIsVariantNode,
 } from "../../render/utils/is-controlling-variants"
-import { getWillChangeName } from "../../value/use-will-change/get-will-change-name"
-import { addUniqueItem } from "../../utils/array"
 import { TargetAndTransition } from "../../types"
+import { getWillChangeName } from "../../value/use-will-change/get-will-change-name"
 
 export interface VisualState<Instance, RenderState> {
     renderState: RenderState
@@ -81,14 +80,6 @@ export const makeUseVisualState =
         return isStatic ? make() : useConstant(make)
     }
 
-function addWillChange(willChange: string[], name: string) {
-    const memberName = getWillChangeName(name)
-
-    if (memberName) {
-        addUniqueItem(willChange, memberName)
-    }
-}
-
 function forEachDefinition(
     props: MotionProps,
     definition: MotionProps["animate"] | MotionProps["initial"],
@@ -115,8 +106,7 @@ function makeLatestValues(
     scrapeMotionValues: ScrapeMotionValuesFromProps
 ) {
     const values: ResolvedValues = {}
-    const willChange: string[] = []
-    const applyWillChange =
+    let applyWillChange =
         shouldApplyWillChange && props.style?.willChange === undefined
 
     const motionValues = scrapeMotionValues(props, {})
@@ -182,14 +172,14 @@ function makeLatestValues(
         if (animate && initial !== false && !isAnimationControls(animate)) {
             forEachDefinition(props, animate, (target) => {
                 for (const key in target) {
-                    addWillChange(willChange, key)
+                    const willChangeName = getWillChangeName(key)
+                    if (willChangeName) {
+                        values.willChange = "transform"
+                        return
+                    }
                 }
             })
         }
-
-        if (willChange.length) {
-            values.willChange = willChange.join(",")
-        }
     }
 
     return values

diff --git a/packages/framer-motion/src/value/use-will-change/__tests__/will-change.ssr.test.tsx b/packages/framer-motion/src/value/use-will-change/__tests__/will-change.ssr.test.tsx
@@ -24,7 +24,7 @@ function runTests(render: (components: any) => string) {
         )
 
         expect(div).toBe(
-            `<div style="--color:#000;clip-path:inset(10px);will-change:transform,clip-path;transform:translateX(100px)"></div>`
+            `<div style="--color:#000;clip-path:inset(10px);will-change:transform;transform:translateX(100px)"></div>`
         )
     })
 

diff --git a/packages/framer-motion/src/value/use-will-change/__tests__/will-change.test.tsx b/packages/framer-motion/src/value/use-will-change/__tests__/will-change.test.tsx
@@ -88,7 +88,7 @@ describe("willChange", () => {
 
         const { container } = render(<Component />)
 
-        expect(container.firstChild).toHaveStyle("will-change: filter;")
+        expect(container.firstChild).toHaveStyle("will-change: transform;")
     })
 
     test("Don't render values defined in animate on initial render if initial is false", async () => {
@@ -116,7 +116,7 @@ describe("willChange", () => {
 
         const { container } = render(<Component />)
 
-        expect(container.firstChild).not.toHaveStyle("will-change: opacity;")
+        expect(container.firstChild).not.toHaveStyle("will-change: transform;")
     })
 
     test("Static mode: Doesn't add externally-provided motion values", async () => {
@@ -132,6 +132,7 @@ describe("willChange", () => {
 
         const { container } = render(<Component />)
 
+        expect(container.firstChild).not.toHaveStyle("will-change: transform;")
         expect(container.firstChild).not.toHaveStyle("will-change: opacity;")
     })
 

diff --git a/packages/framer-motion/src/value/use-will-change/add-will-change.ts b/packages/framer-motion/src/value/use-will-change/add-will-change.ts
@@ -1,29 +1,21 @@
-import { WillChangeMotionValue } from "./WillChangeMotionValue"
 import type { VisualElement } from "../../render/VisualElement"
 import { isWillChangeMotionValue } from "./is"
+import { getWillChangeName } from "./get-will-change-name"
 
 export function addValueToWillChange(
     visualElement: VisualElement,
     key: string
 ) {
     if (!visualElement.applyWillChange) return
 
-    let willChange = visualElement.getValue("willChange")
+    const willChange = visualElement.getValue("willChange")
 
-    /**
-     * If we haven't created a willChange MotionValue, and the we haven't been
-     * manually provided one, create one.
-     */
-    if (!willChange && !visualElement.props.style?.willChange) {
-        willChange = new WillChangeMotionValue("auto")
-        visualElement.addValue("willChange", willChange)
-    }
-
-    /**
-     * It could be that a user has set willChange to a regular MotionValue,
-     * in which case we can't add the value to it.
-     */
     if (isWillChangeMotionValue(willChange)) {
         return willChange.add(key)
+    } else if (
+        !visualElement.props.style?.willChange &&
+        getWillChangeName(key)
+    ) {
+        visualElement.setStaticValue("willChange", "transform")
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -105,7 +105,6 @@ describe("css variables", () => { @@
                 {
                     "--a": "20px",
                     "--color": "rgba(0, 0, 0, 1)",
-                    willChange: "auto",
                 },
             ])
         })
@@ Expand Down @@