Skip to content

Commit

Permalink
Removing externally-provided MotionValues from will-change (#2723)
Browse files Browse the repository at this point in the history
* Removing adding motionvalues to will-change

* Updating test
  • Loading branch information
mattgperry authored Jul 11, 2024
1 parent d43fc97 commit ada1848
Show file tree
Hide file tree
Showing 6 changed files with 29 additions and 19 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand Down
14 changes: 5 additions & 9 deletions packages/framer-motion/src/motion/__tests__/ssr.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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", () => {
Expand All @@ -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>`
)
})

Expand All @@ -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>`
)
})

Expand All @@ -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>`
)
})

Expand Down
5 changes: 0 additions & 5 deletions packages/framer-motion/src/motion/utils/use-visual-state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 />)
Expand Down Expand Up @@ -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)
Expand All @@ -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 () => {
Expand Down

0 comments on commit ada1848

Please sign in to comment.