Remove auto will-change (#2824)

* Applying animating value names to will-change

* Reverting will-change

* Fixing tests

packages/framer-motion/src/gestures/drag/__tests__/index.test.tsx

@@ -1,6 +1,12 @@
 import { useState } from "react"
 import { pointerDown, render } from "../../../../jest.setup"
-import { BoundingBox, motion, motionValue, MotionValue } from "../../../"
+import {
+    BoundingBox,
+    motion,
+    motionValue,
+    MotionValue,
+    useWillChange,
+} from "../../../"
 import { MockDrag, drag, deferred, dragFrame, Point, sleep } from "./utils"
 import { nextFrame } from "../../__tests__/utils"
 import { WillChangeMotionValue } from "../../../value/use-will-change/WillChangeMotionValue"
@@ -57,21 +63,25 @@ describe("dragging", () => {
     })
 
     test("willChange is applied correctly when other values are animating", async () => {
-        const Component = () => (
-            <MockDrag>
-                <motion.div
-                    data-testid="draggable"
-                    drag="y"
-                    dragTransition={{
-                        bounceStiffness: 100000,
-                        bounceDamping: 100000,
-                    }}
-                    initial={{ x: 0 }}
-                    animate={{ x: 100 }}
-                    transition={{ duration: 5 }}
-                />
-            </MockDrag>
-        )
+        const Component = () => {
+            const willChange = useWillChange()
+            return (
+                <MockDrag>
+                    <motion.div
+                        data-testid="draggable"
+                        drag="y"
+                        dragTransition={{
+                            bounceStiffness: 100000,
+                            bounceDamping: 100000,
+                        }}
+                        initial={{ x: 0 }}
+                        animate={{ x: 100 }}
+                        transition={{ duration: 5 }}
+                        style={{ willChange }}
+                    />
+                </MockDrag>
+            )
+        }
 
         const { container, getByTestId, rerender } = render(<Component />)
         rerender(<Component />)
@@ -322,10 +332,6 @@ describe("dragging", () => {
 
         const endValue = await new Promise<number>((resolve) => {
             setTimeout(() => {
-                expect(container.firstChild).toHaveStyle(
-                    "will-change: transform;"
-                )
-
                 resolve(x.get())
             }, 40)
         })

packages/framer-motion/src/motion/utils/use-visual-state.ts

@@ -106,7 +106,8 @@ function makeLatestValues(
     scrapeMotionValues: ScrapeMotionValuesFromProps
 ) {
     const values: ResolvedValues = {}
-    let applyWillChange =
+    const willChange = new Set()
+    const applyWillChange =
         shouldApplyWillChange && props.style?.willChange === undefined
 
     const motionValues = scrapeMotionValues(props, {})
@@ -171,15 +172,19 @@ function makeLatestValues(
     if (applyWillChange) {
         if (animate && initial !== false && !isAnimationControls(animate)) {
             forEachDefinition(props, animate, (target) => {
-                for (const key in target) {
-                    const willChangeName = getWillChangeName(key)
-                    if (willChangeName) {
-                        values.willChange = "transform"
-                        return
+                for (const name in target) {
+                    const memberName = getWillChangeName(name)
+
+                    if (memberName) {
+                        willChange.add(memberName)
                     }
                 }
             })
         }
+
+        if (willChange.size) {
+            values.willChange = Array.from(willChange).join(",")
+        }
     }
 
     return values