Scroll · Moves as you scroll
Scroll-driven animation滚动驱动
- responsive
- continuous
- scrubbable
The animation's progress is bound directly to scroll position, so scrolling back plays it in reverse, like scrubbing a timeline.
When to use it
Use it when scroll position must control playback precisely; for simply playing once on appearance, use “Scroll reveal”.
Parameters
animation-timeline: view() · animation-range: entry 0% → cover 40% · linear
Recipe
Scroll-driven animation → entry 0% → cover 40% @ linear
One sentence for your AI
Bind this progress bar to scroll position with animation-timeline: view(), animation-range from entry 0% to cover 40%, linear, filling over 200px of scrolling and scrubbing backwards on scroll up.