Svelte Motion

FIG-001/ LAYOUTSCROLL

anchored inside scroll.

FLIP measures viewport-relative rects by default — scroll a parent container mid-animation and the offset leaks in as drift. Marking the scroll container with layoutScroll keeps measurements anchored.

Click expand box — the FLIP runs over 1.8 s, plenty of time to experiment. While the boxes are still animating, drag the scrollbar of either panel down by ~80 px.
Left panel — the red box drifts as the FLIP transform fights the scroll offset. Same FLIP, no layoutScroll.
Right panel — the teal box stays anchored in scroll-content space. layoutScroll tells FLIP to re-base measurements in the container's coordinate system, so a mid-animation scroll cancels out instead of leaking into the delta.

↩ all examples

pattern · side-by-side comparison mode · live running source

without layoutScroll drifts on scroll

with layoutScroll stays anchored

category · layoutscroll

sheet · sheet 01 / 01

⟳ to re-run