Scroll · Moves as you scroll
Scroll-scrubbed playback滚动推播放头
- scroll becomes a scrubber
- plays backwards
- freezes on stop
An animation that would normally play on its own no longer does: scroll down and it runs forward, scroll back and it plays in reverse, stop and it freezes on that frame. The scrollbar has become the scrubber.
When to use it
Use it for product teardowns, assembly steps, and tutorials — content where people want to control which step they see. Avoid time-sensitive content such as intros and emotional beats; people may never scroll to the end.
Parameters
progress 0 → 1 mapped onto the timeline playhead · 1:1 with scroll, no easing · reverse on scroll up · hold when still
Recipe
Scroll-scrubbed playback → progress 0 → 1 mapped onto the timeline playhead · 1:1 with scroll, no easing · reverse on scroll up · hold when still
One sentence for your AI
Hand this animation's playhead to the scroll: map scroll progress 0 to 1 onto the timeline position and write it every frame (currentTime for video, goToAndStop for vector animations, a redraw for canvas). Track the scroll 1:1 with no easing, and make scrolling back play it in reverse and stopping freeze the frame.