05 · Scroll-Driven Animation
Native animation-timeline — no JS, no GSAP
Scroll down to see animations
animation-timeline: scroll()
The progress bar at top is driven purely by page scroll position.
.progress-bar {
animation: grow-width linear;
animation-timeline: scroll(root);
}
animation-timeline: view()
Each card below animates as it enters the viewport.
01
fade-up
opacity 0→1, translateY 40px→0 on view entry
02
fade-up (delayed)
Same animation with animation-delay applied
03
scale-in
scale 0.7→1 with opacity fade
animation-range
Control exactly when in the view timeline the animation runs.
entry 0% — 40%
Animates only during the entry phase
cover 20% — 80%
Animates across the middle of the viewport
exit 60% — 100%
Animates as the element exits
Scrub-style Counter
Number counts up purely via scroll position using CSS counters + animation-timeline.