.scroll-progress - scrubbed entrances

While .scroll plays a one-shot tween on enter, .scroll-progress scrubs the entrance timeline directly with the scrollbar: your scroll position IS the playhead. Combine it with a spawn class (that's where the from/to state comes from).

html

<div class="expand-horizontal scroll-progress"></div>

Demo - scroll slowly past these blocks

.expand-horizontal .scroll-progress - width follows the scrollbar

I fade in proportionally to your scroll

Any spawn works here.spawn-up .scroll-progress - position AND opacity track the playhead, so scrolling back up rewinds me mid-motion

Demo - scrubbed counter

Counters compose with the scrub too: the number below IS the scroll progress, tracking your scrollbar exactly in both directions.

100%

Tunables

progress-start-NScrub starts when top hits (100−N)% of viewport

progress-end-NScrub ends at (100−N)% instead of centre-centre

.progress-reverseInverts the mapping: revealed → hidden as you scroll

Counters have first-class support: <span class="count scroll-progress spawn-num-0">100</span> counts up/down with the scrub instead of fading - see Counters for the full behaviour.