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
- Select the element.
- Add a scroll-scrub interaction.
- Set the start/end window.
- Enable pin (and pinSpacing) for a pinned scroll section, or point it at a video/image-sequence to scrub media.
Map scroll position to progress
- Start and end expressions define the scroll window that maps to animation progress; choose them relative to the trigger element and viewport.
- Pinning holds the selected element in place during the scrub window; pin target, pin spacing, and anticipate pin tune that behavior.
- Scrubbed video can use a source-time range and playback options; image sequences map scroll progress to a frame list and fit mode.
Build and test a pinned section
- Select the intended trigger and add Scroll scrub, then set a short start/end window before enabling pinning.
- Choose whether to pin the trigger or a separate target and decide whether pin spacing should preserve document flow.
- Preview from before the start boundary through after the end boundary at desktop and mobile sizes; check for jumps, unexpected page height, or media seeking issues.
Tips
- Use one clear pinned section at a time while tuning; overlapping pin ranges can make scroll behavior difficult to reason about.
Limitations and important notes
- Scroll-scrub behavior depends on the page’s scroll container and media readiness; test the published/runtime path, not only the editor preview.