Adding willChange injection

mattgperry · mattgperry · commit 57f693538e25 · 2025-04-11T12:25:54.000+02:00
diff --git a/packages/framer-motion/src/index.ts b/packages/framer-motion/src/index.ts
@@ -55,6 +55,7 @@ export { useTime } from "./value/use-time"
 export { useTransform } from "./value/use-transform"
 export { useVelocity } from "./value/use-velocity"
 export { useWillChange } from "./value/use-will-change"
+export { WillChangeMotionValue } from "./value/use-will-change/WillChangeMotionValue"
 export { resolveMotionValue } from "./value/utils/resolve-motion-value"
 
 /**
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
@@ -1,4 +1,10 @@
-import { frame, motion, useMotionValue, useWillChange } from "../../.."
+import {
+    frame,
+    motion,
+    MotionGlobalConfig,
+    useMotionValue,
+    useWillChange,
+} from "../../.."
 import { render } from "../../../../jest.setup"
 import { nextFrame } from "../../../gestures/__tests__/utils"
 import { WillChangeMotionValue } from "../WillChangeMotionValue"
@@ -159,3 +165,145 @@ describe("willChange", () => {
         expect(container.firstChild).toHaveStyle("will-change: transform;")
     })
 })
+
+describe("willChange injection", () => {
+    beforeAll(() => {
+        MotionGlobalConfig.WillChange = WillChangeMotionValue
+    })
+
+    afterAll(() => {
+        MotionGlobalConfig.WillChange = undefined
+    })
+
+    test("Renders values defined in animate on initial render", async () => {
+        const Component = () => {
+            const opacity = useMotionValue(0)
+            return (
+                <motion.div
+                    animate={{ x: 100, backgroundColor: "#000" }}
+                    style={{ opacity }}
+                />
+            )
+        }
+
+        const { container, rerender } = render(<Component />)
+        rerender(<Component />)
+
+        await nextFrame()
+
+        expect(container.firstChild).toHaveStyle("will-change: transform;")
+    })
+
+    test("Doesn't render CSS variables or non-hardware accelerated values", async () => {
+        const Component = () => {
+            return (
+                <motion.div
+                    animate={
+                        {
+                            filter: "blur(10px)",
+                            background: "#000",
+                            "--test": "#000",
+                        } as any
+                    }
+                />
+            )
+        }
+
+        const { container } = render(<Component />)
+
+        await nextFrame()
+
+        expect(container.firstChild).toHaveStyle("will-change: filter;")
+    })
+
+    test("Externally-provided motion values are not added to will-change", async () => {
+        const Component = () => {
+            const opacity = useMotionValue(0)
+            const height = useMotionValue(100)
+            return <motion.div style={{ opacity, height }} />
+        }
+
+        const { container } = render(<Component />)
+
+        expect(container.firstChild).not.toHaveStyle("will-change: opacity;")
+        expect(container.firstChild).not.toHaveStyle(
+            "will-change: height, opacity;"
+        )
+        expect(container.firstChild).not.toHaveStyle(
+            "will-change: opacity, height;"
+        )
+    })
+
+    test("Don't remove values when they finish animating", async () => {
+        return new Promise<void>(async (resolve) => {
+            const Component = () => {
+                return (
+                    <motion.div
+                        transition={{ duration: 0.1 }}
+                        animate={{ x: 100 }}
+                        onAnimationComplete={() => {
+                            frame.postRender(() => {
+                                expect(container.firstChild).toHaveStyle(
+                                    "will-change: transform;"
+                                )
+                                resolve()
+                            })
+                        }}
+                    />
+                )
+            }
+
+            const { container } = render(<Component />)
+
+            await nextFrame()
+
+            expect(container.firstChild).toHaveStyle("will-change: transform;")
+        })
+    })
+
+    test("Add values when they start animating", async () => {
+        const Component = ({ animate }: any) => {
+            return (
+                <motion.div
+                    initial={false}
+                    animate={animate}
+                    transition={{ duration: 0.1 }}
+                />
+            )
+        }
+        const { container, rerender } = render(<Component animate={{}} />)
+        await nextFrame()
+
+        expect(container.firstChild).not.toHaveStyle("will-change: transform;")
+        rerender(<Component animate={{ x: 100 }} />)
+
+        await nextFrame()
+
+        expect(container.firstChild).toHaveStyle("will-change: transform;")
+    })
+
+    test("Doesn't remove values when animation interrupted", async () => {
+        const Component = ({ animate }: any) => {
+            return (
+                <motion.div
+                    initial={{ x: 0 }}
+                    animate={animate}
+                    transition={{ duration: 0.1 }}
+                />
+            )
+        }
+        const { container, rerender } = render(<Component animate={{}} />)
+        await nextFrame()
+
+        expect(container.firstChild).not.toHaveStyle("will-change: transform;")
+        rerender(<Component animate={{ x: 100 }} />)
+
+        await nextFrame()
+
+        expect(container.firstChild).toHaveStyle("will-change: transform;")
+        rerender(<Component animate={{ x: 200 }} />)
+
+        await nextFrame()
+        expect(container.firstChild).toHaveStyle("will-change: transform;")
+    })
+})
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,3 +1,4 @@
+import { MotionGlobalConfig } from "motion-utils"
 import type { VisualElement } from "../../render/VisualElement"
 import { isWillChangeMotionValue } from "./is"
 
@@ -13,5 +14,10 @@ export function addValueToWillChange(
      */
     if (isWillChangeMotionValue(willChange)) {
         return willChange.add(key)
+    } else if (!willChange && MotionGlobalConfig.WillChange) {
+        const newWillChange = new MotionGlobalConfig.WillChange("auto")
+
+        visualElement.addValue("willChange", newWillChange)
+        newWillChange.add(key)
     }
 }
diff --git a/packages/motion-utils/src/__tests__/velocity-per-second.test.ts b/packages/motion-utils/src/__tests__/velocity-per-second.test.ts
@@ -1,4 +1,4 @@
-import { velocityPerSecond } from "motion-utils"
+import { velocityPerSecond } from "../velocity-per-second"
 
 test("velocityPerSecond", () => {
     expect(velocityPerSecond(0.835, 16.7)).toBe(50)
diff --git a/packages/motion-utils/src/global-config.ts b/packages/motion-utils/src/global-config.ts
@@ -1,4 +1,8 @@
-export const MotionGlobalConfig = {
+export const MotionGlobalConfig: {
+    skipAnimations: boolean
+    useManualTiming: boolean
+    WillChange?: any
+} = {
     skipAnimations: false,
     useManualTiming: false,
 }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import { MotionGlobalConfig } from "motion-utils"`
`1`	`2`	`import type { VisualElement } from "../../render/VisualElement"`
`2`	`3`	`import { isWillChangeMotionValue } from "./is"`
`3`	`4`
`@@ -13,5 +14,10 @@ export function addValueToWillChange(`
`13`	`14`	`*/`
`14`	`15`	`if (isWillChangeMotionValue(willChange)) {`
`15`	`16`	`return willChange.add(key)`
	`17`	`+ } else if (!willChange && MotionGlobalConfig.WillChange) {`
	`18`	`+ const newWillChange = new MotionGlobalConfig.WillChange("auto")`
	`19`	`+`
	`20`	`+ visualElement.addValue("willChange", newWillChange)`
	`21`	`+ newWillChange.add(key)`
`16`	`22`	`}`
`17`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { velocityPerSecond } from "motion-utils"`
	`1`	`+import { velocityPerSecond } from "../velocity-per-second"`
`2`	`2`
`3`	`3`	`test("velocityPerSecond", () => {`
`4`	`4`	`expect(velocityPerSecond(0.835, 16.7)).toBe(50)`