Skip to content

Commit

Permalink
Updating
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattgperry
mattgperry authored and mergatron[bot] committed May 15, 2024
1 parent e42759b commit 2727333
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 80 deletions.
76 changes: 17 additions & 59 deletions dev/optimized-appear/defer-handoff-block.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<head>
<style>
body {
padding: 100px;
margin: 0;
}

Expand Down Expand Up @@ -61,6 +60,22 @@
box.style.backgroundColor = "green"

setTimeout(() => {
frame.postRender(() => {
/**
* The frame visible after the infinite loop
* and before motion renders again
*/
frame.preRender(() => {
const left = box.getBoundingClientRect().left

if (left < 200) {
showError(
document.getElementById("box"),
`Stutter detected`
)
}
})
})
/**
* By blocking the main thread here, we ensure that
* the keyframes
Expand All @@ -69,24 +84,11 @@
console.log(
"Blocking main thread before keyframe resolution"
)

const startTime = performance.now()
while (performance.now() - startTime < 1000) {}
})

let prevLeft = 0
frame.postRender(() => {
const left = box.getBoundingClientRect().left

if (left < prevLeft) {
showError(
document.getElementById("box"),
`Stutter detected`
)
}

prevLeft = left
}, true)

/**
* This animation interrupts the optimised animation. Notably, we are animating
* x in the optimised transform animation and only scale here. This ensures
Expand All @@ -113,50 +115,6 @@
},
}
)
// animate(box, { opacity: 0.1 }, options).then(() => {
// return
// frame.postRender(() => {
// if (frameCounter < 5) {
// showError(
// document.getElementById("box"),
// `Fewer animation frames detected than expected`
// )
// }

// if (getComputedStyle(box).opacity !== "0.1") {
// showError(
// document.getElementById("box"),
// `opacity animation didn't interrupt optimised animation. Opacity was ${
// getComputedStyle(box).opacity
// } instead of 0.1.`
// )
// }
// if (getComputedStyle(box).opacity !== "0.1") {
// showError(
// document.getElementById("box"),
// `opacity animation didn't interrupt optimised animation. Opacity was ${
// getComputedStyle(box).opacity
// } instead of 0.1.`
// )
// }

// const { width, left } =
// box.getBoundingClientRect()
// if (Math.round(width) !== 200) {
// showError(
// document.getElementById("box"),
// `scale animation didn't interrupt optimised animation. Width was ${width}px instead of 200px.`
// )
// }

// if (left <= 100) {
// showError(
// document.getElementById("box"),
// `scale animation incorrectly interrupted optimised animation. Left was ${left}px instead of 100px.`
// )
// }
// })
// })
}, 100)
},
[optimizedAppearDataAttribute]: "a",
Expand Down
45 changes: 24 additions & 21 deletions dev/optimized-appear/defer-handoff.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,29 +71,32 @@
{ scale: 2, opacity: 0.1 },
{ duration: 0.3, ease: "linear" }
).then(() => {
if (getComputedStyle(box).opacity !== "0.1") {
showError(
document.getElementById("box"),
`opacity animation didn't interrupt optimised animation. Opacity was ${
getComputedStyle(box).opacity
} instead of 0.1.`
)
}
frame.postRender(() => {
if (getComputedStyle(box).opacity !== "0.1") {
showError(
document.getElementById("box"),
`opacity animation didn't interrupt optimised animation. Opacity was ${
getComputedStyle(box).opacity
} instead of 0.1.`
)
}

const { width, left } = box.getBoundingClientRect()
if (width !== 200) {
showError(
document.getElementById("box"),
`scale animation didn't interrupt optimised animation. Width was ${width}px instead of 200px.`
)
}
const { width, left } =
box.getBoundingClientRect()
if (Math.round(width) !== 200) {
showError(
document.getElementById("box"),
`scale animation didn't interrupt optimised animation. Width was ${width}px instead of 200px.`
)
}

if (left <= 100) {
showError(
document.getElementById("box"),
`scale animation incorrectly interrupted optimised animation. Left was ${left}px instead of 100px.`
)
}
if (left <= 100) {
showError(
document.getElementById("box"),
`scale animation incorrectly interrupted optimised animation. Left was ${left}px instead of 100px.`
)
}
})
})
}, 100)
},
Expand Down
4 changes: 4 additions & 0 deletions packages/framer-motion/src/animation/optimized-appear/handoff.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@ export function handoffOptimizedAppearAnimation(
* If we've been provided the frameloop as an argument, use it to defer
* cancellation until keyframes of the subsequent animation have been resolved.
* Otherwise cancel immediately.
*
* This is an optional dependency to deal with the fact that this inline
* script and the library can be version sharded, and there have been
* times when this isn't provided as an argument.
*/
frame.render(() =>
frame.render(() => {
Expand Down

0 comments on commit 2727333

Please sign in to comment.