MOTION LAB / Stable API
moveScroll
Learn more
Link animations to scroll position. Elements animate based on their position in the viewport as you scroll.
↓
Scroll down
BG
MID
FG
linked: 0.00
Combined translate, scale and rotate effects
Controls Make it yours
50
20100
<div id="scroll-preview" style="height: 360px; overflow-y: auto">
<div style="height: 400px">Scroll down</div>
<div [moveScroll]="{ y: [0, -50] }" moveScrollContainer="#scroll-preview">Background</div>
<div [moveScroll]="{ scale: [0.8, 1.25] }" moveScrollContainer="#scroll-preview">Middle</div>
<div [moveScroll]="{ y: [0, 50], rotate: [0, 50] }" moveScrollContainer="#scroll-preview">Foreground</div>
<div style="height: 400px"></div>
</div>