Scroll scrub (scroll-linked & pinning)

A scroll-scrub interaction ties animation progress to scroll position — scrubbing a timeline as you scroll, optionally pinning the element in place. It also drives video scrubbing and image-sequence playback.

Where: Right sidebar → Interact → Interactions → “+” → Scroll — Add a scroll-scrub interaction

Key ideas

• Scrub window: start / end (e.g. “top bottom”) map scroll range to animation progress.
• Pinning: pin holds the element fixed while scrubbing; pinTarget, pinSpacing, and anticipatePin tune the pin.
• Media scrubbing: Scrub a video (startAt/endAt/muted/loop) or an image sequence (frames[], fit) to scroll.

Steps

1. Select the element.
2. Add a scroll-scrub interaction.
3. Set the start/end window.
4. Enable pin (and pinSpacing) for a pinned scroll section, or point it at a video/image-sequence to scrub media.