Skip to content

Commit

Permalink
Merge pull request #2105 from framer/fix/batch-layout-animations
Browse files Browse the repository at this point in the history 
Move layout animations to `queueMicrotask`
  • Loading branch information
@mergetron
mergetron[bot] authored May 5, 2023
2 parents 936e9ee + 86ee4c8 commit 1f749b5
Show file tree
Hide file tree
Showing 54 changed files with 304 additions and 275 deletions.
6 changes: 3 additions & 3 deletions dev/projection/animate-relative-interrupt.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,10 @@

parentProjection.root.didUpdate()

matchViewportBox(parent, parentOrigin)
matchViewportBox(child, childOrigin)

frame.postRender(() => {
matchViewportBox(parent, parentOrigin)
matchViewportBox(child, childOrigin)

frame.postRender(() => {
matchViewportBox(parent, {
top: 50,
Expand Down
8 changes: 5 additions & 3 deletions dev/projection/element-page-scroll-non-zero.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,11 @@

boxProjection.root.didUpdate()

matchViewportBox(box, addPageScroll(boxOrigin, -100, -50))
matchOpacity(box, 1)
matchBorderRadius(box, "20px")
frame.postRender(() => {
matchViewportBox(box, addPageScroll(boxOrigin, -100, -50))
matchOpacity(box, 1)
matchBorderRadius(box, "20px")
})
</script>
</body>
</html>
8 changes: 5 additions & 3 deletions dev/projection/element-scroll-layout-change.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,11 @@

boxProjection.root.didUpdate()

matchViewportBox(box, boxOrigin)
matchOpacity(box, 1)
matchBorderRadius(box, "20%")
frame.postRender(() => {
matchViewportBox(box, boxOrigin)
matchOpacity(box, 1)
matchBorderRadius(box, "20%")
})
</script>
</body>
</html>
8 changes: 5 additions & 3 deletions dev/projection/element-scroll-non-zero.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,11 @@

boxProjection.root.didUpdate()

matchViewportBox(box, addPageScroll(boxOrigin, -50, 0))
matchOpacity(box, 1)
matchBorderRadius(box, "20px")
frame.postRender(() => {
matchViewportBox(box, addPageScroll(boxOrigin, -50, 0))
matchOpacity(box, 1)
matchBorderRadius(box, "20px")
})
</script>
</body>
</html>
8 changes: 5 additions & 3 deletions dev/projection/element-scroll-to-layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,11 @@
/**
* Don't animate the box from its previous position if the scroll has changed.
*/
matchViewportBox(box, boxOrigin)
matchOpacity(box, 1)
matchBorderRadius(box, "20%")
frame.postRender(() => {
matchViewportBox(box, boxOrigin)
matchOpacity(box, 1)
matchBorderRadius(box, "20%")
})
</script>
</body>
</html>
8 changes: 5 additions & 3 deletions dev/projection/element-scroll.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,11 @@

boxProjection.root.didUpdate()

matchViewportBox(box, addPageScroll(boxOrigin, 50, 0))
matchOpacity(box, 1)
matchBorderRadius(box, "20px")
frame.postRender(() => {
matchViewportBox(box, addPageScroll(boxOrigin, 50, 0))
matchOpacity(box, 1)
matchBorderRadius(box, "20px")
})
</script>
</body>
</html>
16 changes: 9 additions & 7 deletions dev/projection/flexbox-siblings-layout-group.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,16 @@

aProjection.root.didUpdate()

window.scrollTo(0, 0)
frame.postRender(() => {
window.scrollTo(0, 0)

matchViewportBox(a, aOrigin)
matchViewportBox(b, bOrigin)
matchOpacity(a, 1)
matchOpacity(b, 1)
matchBorderRadius(a, "13.3333% / 10%")
matchBorderRadius(b, "")
matchViewportBox(a, aOrigin)
matchViewportBox(b, bOrigin)
matchOpacity(a, 1)
matchOpacity(b, 1)
matchBorderRadius(a, "13.3333% / 10%")
matchBorderRadius(b, "")
})
</script>
</body>
</html>
36 changes: 20 additions & 16 deletions dev/projection/flexbox-siblings-to-grid-page-scroll-interrupt.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,22 +86,26 @@

aProjection.root.didUpdate()

matchViewportBox(a, addPageScroll(aOrigin, 50, 100))
matchViewportBox(b, addPageScroll(bOrigin, 50, 100))

aProjection.willUpdate()
bProjection.willUpdate()
container.classList.remove("as-grid")
window.scrollTo(0, 0)

aProjection.root.didUpdate()

matchViewportBox(a, aOrigin)
matchViewportBox(b, bOrigin)
matchOpacity(a, 1)
matchOpacity(b, 1)
matchBorderRadius(a, "20px")
matchBorderRadius(b, "")
frame.postRender(() => {
matchViewportBox(a, addPageScroll(aOrigin, 50, 100))
matchViewportBox(b, addPageScroll(bOrigin, 50, 100))

aProjection.willUpdate()
bProjection.willUpdate()
container.classList.remove("as-grid")
window.scrollTo(0, 0)

aProjection.root.didUpdate()

frame.postRender(() => {
matchViewportBox(a, aOrigin)
matchViewportBox(b, bOrigin)
matchOpacity(a, 1)
matchOpacity(b, 1)
matchBorderRadius(a, "20px")
matchBorderRadius(b, "")
})
})
</script>
</body>
</html>
14 changes: 8 additions & 6 deletions dev/projection/flexbox-siblings-to-grid-page-scroll.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,14 @@

aProjection.root.didUpdate()

matchViewportBox(a, addPageScroll(aOrigin, 50, 100))
matchViewportBox(b, addPageScroll(bOrigin, 50, 100))
matchOpacity(a, 1)
matchOpacity(b, 1)
matchBorderRadius(a, "13.3333% / 10%")
matchBorderRadius(b, "")
frame.postRender(() => {
matchViewportBox(a, addPageScroll(aOrigin, 50, 100))
matchViewportBox(b, addPageScroll(bOrigin, 50, 100))
matchOpacity(a, 1)
matchOpacity(b, 1)
matchBorderRadius(a, "13.3333% / 10%")
matchBorderRadius(b, "")
})
</script>
</body>
</html>
6 changes: 4 additions & 2 deletions dev/projection/flexbox-siblings-to-grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,10 @@

aProjection.root.didUpdate()

matchViewportBox(a, aOrigin)
matchViewportBox(b, bOrigin)
frame.postRender(() => {
matchViewportBox(a, aOrigin)
matchViewportBox(b, bOrigin)
})
</script>
</body>
</html>
14 changes: 8 additions & 6 deletions dev/projection/flexbox-siblings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,14 @@

aProjection.root.didUpdate()

matchViewportBox(a, aOrigin)
matchViewportBox(b, bOrigin)
matchOpacity(a, 1)
matchOpacity(b, 1)
matchBorderRadius(a, "13.3333% / 10%")
matchBorderRadius(b, "")
frame.postRender(() => {
matchViewportBox(a, aOrigin)
matchViewportBox(b, bOrigin)
matchOpacity(a, 1)
matchOpacity(b, 1)
matchBorderRadius(a, "13.3333% / 10%")
matchBorderRadius(b, "")
})
</script>
</body>
</html>
24 changes: 14 additions & 10 deletions dev/projection/nested-layout-change-mid-projection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,16 +83,20 @@

boxProjection.root.didUpdate()

matchViewportBox(box, boxOrigin)
matchViewportBox(child, childOrigin)

// Second render
childProjection.willUpdate()
child.classList.add("b")
boxProjection.root.didUpdate()

matchViewportBox(box, boxOrigin)
matchViewportBox(child, childOrigin)
frame.postRender(() => {
matchViewportBox(box, boxOrigin)
matchViewportBox(child, childOrigin)

// Second render
childProjection.willUpdate()
child.classList.add("b")
boxProjection.root.didUpdate()

frame.postRender(() => {
matchViewportBox(box, boxOrigin)
matchViewportBox(child, childOrigin)
})
})
</script>
</body>
</html>
6 changes: 4 additions & 2 deletions dev/projection/nested-layout-change-scale-correction.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,10 @@

parentProjection.root.didUpdate()

matchViewportBox(parent, parentOrigin)
matchViewportBox(child, childOrigin)
frame.postRender(() => {
matchViewportBox(parent, parentOrigin)
matchViewportBox(child, childOrigin)
})
</script>
</body>
</html>
17 changes: 9 additions & 8 deletions dev/projection/new-element-concurrent.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@
const boxOrigin = box.getBoundingClientRect()
const a = document.createElement("div")
a.id = "child"
a.setAttribute("data-projection-id", "a")

// Render phase
const aProjection = createNode(
Expand All @@ -65,7 +64,7 @@
{ layout: true },
"a"
)
const bProjection = new HTMLProjectionNode("b", {}, boxProjection)
const bProjection = new HTMLProjectionNode({}, boxProjection)

// Snapshot
boxProjection.willUpdate()
Expand All @@ -80,12 +79,14 @@
// A/B mounts
aProjection.mount(a)

matchViewportBox(box, boxOrigin)
matchViewportBox(a, {
bottom: 70,
left: 20,
right: 70,
top: 20,
frame.postRender(() => {
matchViewportBox(box, boxOrigin)
matchViewportBox(a, {
bottom: 70,
left: 20,
right: 70,
top: 20,
})
})
</script>
</body>
Expand Down
4 changes: 2 additions & 2 deletions dev/projection/perf-neighbours.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@

topProjection.root.didUpdate()

requestAnimationFrame(() => {
requestAnimationFrame(() => {
frame.postRender(() => {
frame.postRender(() => {
console.log(window.ProjectionFrames)
checkFrame(topEl, 2, {
totalNodes: 5,
Expand Down
4 changes: 1 addition & 3 deletions dev/projection/script-animate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ addScaleCorrector({
boxShadow: correctBoxShadow,
})

let id = 1
Animate.createNode = (
element,
parent,
Expand All @@ -54,8 +53,7 @@ Animate.createNode = (
visualElement.scheduleRender()
}

id++
const node = new HTMLProjectionNode(id, latestValues, parent)
const node = new HTMLProjectionNode(latestValues, parent)

node.setOptions({
scheduleRender: scheduleRender,
Expand Down
4 changes: 1 addition & 3 deletions dev/projection/script-undo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ addScaleCorrector({
boxShadow: correctBoxShadow,
})

let id = 1
Undo.createNode = (element, parent, options = {}, overrideId) => {
const latestValues = {}
const visualElement = new HTMLVisualElement({
Expand All @@ -49,8 +48,7 @@ Undo.createNode = (element, parent, options = {}, overrideId) => {
visualElement.scheduleRender()
}

id++
const node = new HTMLProjectionNode(overrideId || id, latestValues, parent)
const node = new HTMLProjectionNode(latestValues, parent)

node.setOptions({
animate: false,
Expand Down
12 changes: 7 additions & 5 deletions dev/projection/shared-block-update-promote-new.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,13 @@
boxProjection.promote()
boxProjection.root.didUpdate()

matchViewportBox(box, newBoxOrigin)
matchViewportBox(newBox, newBoxOrigin)
matchVisibility(box, "visible")
matchVisibility(newBox, "hidden")
matchOpacity(box, 1)
frame.postRender(() => {
matchViewportBox(box, newBoxOrigin)
matchViewportBox(newBox, newBoxOrigin)
matchVisibility(box, "visible")
matchVisibility(newBox, "hidden")
matchOpacity(box, 1)
})
}, 50)
</script>
</body>
Expand Down
12 changes: 7 additions & 5 deletions dev/projection/shared-transform-parents.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,12 +89,14 @@

newChildProjection.root.didUpdate()

const newChildOrigin = newChild.getBoundingClientRect()
frame.postRender(() => {
const newChildOrigin = newChild.getBoundingClientRect()

matchViewportBox(child, childOrigin)
matchViewportBox(newChild, childOrigin)
matchOpacity(child, 1)
matchOpacity(newChild, 0)
matchViewportBox(child, childOrigin)
matchViewportBox(newChild, childOrigin)
matchOpacity(child, 1)
matchOpacity(newChild, 0)
})
})
</script>
</body>
Expand Down
Loading

0 comments on commit 1f749b5

Please sign in to comment.