diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1386d25e65..bdbf4bb5b4 100644
--- 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
index 633ab039e4..5ab9603f8f 100644
--- 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()
const string = renderToString()
- const expectedMarkup = ``
+ const expectedMarkup = ``
expect(staticMarkup).toBe(expectedMarkup)
expect(string).toBe(expectedMarkup)
@@ -32,7 +32,7 @@ describe("Reorder", () => {
const staticMarkup = renderToStaticMarkup()
const string = renderToString()
- const expectedMarkup = ``
+ const expectedMarkup = ``
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
index d404894ed0..6a42aa2360 100644
--- 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) {
)
- expect(div).toBe(
- `
`
- )
+ expect(div).toBe(``)
})
test("sets tabindex='0' if onTap is set", () => {
@@ -165,9 +163,7 @@ function runTests(render: (components: any) => string) {
/>
)
- expect(div).toBe(
- ``
- )
+ expect(div).toBe(``)
})
test("Reorder: Renders correct element", () => {
@@ -182,7 +178,7 @@ function runTests(render: (components: any) => string) {
const div = render()
expect(div).toBe(
- ``
+ ``
)
})
@@ -198,7 +194,7 @@ function runTests(render: (components: any) => string) {
const div = render()
expect(div).toBe(
- ``
+ ``
)
})
@@ -214,7 +210,7 @@ function runTests(render: (components: any) => string) {
const div = render()
expect(div).toBe(
- ``
+ ``
)
})
diff --git a/packages/framer-motion/src/motion/utils/use-visual-state.ts b/packages/framer-motion/src/motion/utils/use-visual-state.ts
index 4865da69d8..15e72f013f 100644
--- 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
index 4a9ceb990b..1e60fa53c9 100644
--- 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(``)
})
+ test("Externally defined MotionValues not automatically added to will-change", () => {
+ const opacity = motionValue(0.5)
+ const div = render()
+
+ expect(div).toBe(``)
+ })
+
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
index e06c756be1..7213126bd4 100644
--- 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
+ const opacity = useMotionValue(0)
+ return (
+
+ )
}
const { container } = render()
@@ -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()
- 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 () => {