Removing externally-provided MotionValues from will-change (#2723)

* Removing adding motionvalues to will-change * Updating test
framer · Jul 11, 2024 · ada1848 · ada1848
1 parent d43fc97
commit ada1848
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [11.3.1] 2024-07-11
+
+### Updated
+
+-   Externally-provided `MotionValue`s are no longer permanently added to `will-change`.
+
 ## [11.3.0] 2024-07-10
 
 ### Updated

diff --git a/packages/framer-motion/src/components/Reorder/__tests__/server.ssr.test.tsx b/packages/framer-motion/src/components/Reorder/__tests__/server.ssr.test.tsx
@@ -13,7 +13,7 @@ describe("Reorder", () => {
         const staticMarkup = renderToStaticMarkup(<Component />)
         const string = renderToString(<Component />)
 
-        const expectedMarkup = `<article><main style="z-index:unset;will-change:transform;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></main></article>`
+        const expectedMarkup = `<article><main style="z-index:unset;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></main></article>`
 
         expect(staticMarkup).toBe(expectedMarkup)
         expect(string).toBe(expectedMarkup)
@@ -32,7 +32,7 @@ describe("Reorder", () => {
         const staticMarkup = renderToStaticMarkup(<Component />)
         const string = renderToString(<Component />)
 
-        const expectedMarkup = `<article><main style="z-index:unset;will-change:transform;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></main></article>`
+        const expectedMarkup = `<article><main style="z-index:unset;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></main></article>`
 
         expect(staticMarkup).toBe(expectedMarkup)
         expect(string).toBe(expectedMarkup)

diff --git a/packages/framer-motion/src/motion/__tests__/ssr.test.tsx b/packages/framer-motion/src/motion/__tests__/ssr.test.tsx
@@ -127,9 +127,7 @@ function runTests(render: (components: any) => string) {
             <motion.div initial={{ x: 100 }} style={{ x: 200 }} />
         )
 
-        expect(div).toBe(
-            `<div style="will-change:transform;transform:translateX(100px)"></div>`
-        )
+        expect(div).toBe(`<div style="transform:translateX(100px)"></div>`)
     })
 
     test("sets tabindex='0' if onTap is set", () => {
@@ -165,9 +163,7 @@ function runTests(render: (components: any) => string) {
             />
         )
 
-        expect(div).toBe(
-            `<div style="will-change:transform;transform:translateX(100px)"></div>`
-        )
+        expect(div).toBe(`<div style="transform:translateX(100px)"></div>`)
     })
 
     test("Reorder: Renders correct element", () => {
@@ -182,7 +178,7 @@ function runTests(render: (components: any) => string) {
         const div = render(<Component />)
 
         expect(div).toBe(
-            `<ul><li style="z-index:unset;will-change:transform;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></li></ul>`
+            `<ul><li style="z-index:unset;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></li></ul>`
         )
     })
 
@@ -198,7 +194,7 @@ function runTests(render: (components: any) => string) {
         const div = render(<Component />)
 
         expect(div).toBe(
-            `<ul><li style="z-index:unset;will-change:transform;transform:none"></li></ul>`
+            `<ul><li style="z-index:unset;transform:none"></li></ul>`
         )
     })
 
@@ -214,7 +210,7 @@ function runTests(render: (components: any) => string) {
         const div = render(<Component />)
 
         expect(div).toBe(
-            `<div><div style="z-index:unset;will-change:transform;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></div></div>`
+            `<div><div style="z-index:unset;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></div></div>`
         )
     })
 

diff --git a/packages/framer-motion/src/motion/utils/use-visual-state.ts b/packages/framer-motion/src/motion/utils/use-visual-state.ts
@@ -122,11 +122,6 @@ function makeLatestValues(
     const motionValues = scrapeMotionValues(props, {})
     for (const key in motionValues) {
         values[key] = resolveMotionValue(motionValues[key])
-
-        // If a value is an externally-provided motion value, add it to will-change
-        if (applyWillChange) {
-            addWillChange(willChange, key)
-        }
     }
 
     let { initial, animate } = props

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
@@ -69,6 +69,13 @@ function runTests(render: (components: any) => string) {
         expect(div).toBe(`<div></div>`)
     })
 
+    test("Externally defined MotionValues not automatically added to will-change", () => {
+        const opacity = motionValue(0.5)
+        const div = render(<motion.div style={{ opacity }} />)
+
+        expect(div).toBe(`<div style="opacity:0.5"></div>`)
+    })
+
     test("will-change manually set by MotionValue", () => {
         const willChange = motionValue("opacity")
         const div = render(

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
@@ -37,7 +37,13 @@ describe("willChange", () => {
 
     test("Renders values defined in animate on initial render", async () => {
         const Component = () => {
-            return <motion.div animate={{ x: 100, backgroundColor: "#000" }} />
+            const opacity = useMotionValue(0)
+            return (
+                <motion.div
+                    animate={{ x: 100, backgroundColor: "#000" }}
+                    style={{ opacity }}
+                />
+            )
         }
 
         const { container } = render(<Component />)
@@ -109,7 +115,7 @@ describe("willChange", () => {
         expect(container.firstChild).not.toHaveStyle("will-change: transform;")
     })
 
-    test("Add externally-provided motion values", async () => {
+    test("Externally-provided motion values are not added to will-change", async () => {
         const Component = () => {
             const opacity = useMotionValue(0)
             const height = useMotionValue(100)
@@ -118,7 +124,7 @@ describe("willChange", () => {
 
         const { container } = render(<Component />)
 
-        expect(container.firstChild).toHaveStyle("will-change: opacity;")
+        expect(container.firstChild).not.toHaveStyle("will-change: opacity;")
     })
 
     test("Static mode: Doesn't add externally-provided motion values", async () => {