Scroll-Driven CSS
Native animation-timeline ties animations to scroll position — runs on the compositor thread with zero JavaScript.
Also called: scroll-timeline, view-timeline, CSS scroll animations
↓ Progress bar fills as you scroll
Card one
Reveals when it enters the viewport via animation-timeline: view().
animation-range: entry 0% cover 40%
Card two
No Intersection Observer needed — the browser handles scroll-linked animation.
Card three
2026 best practice: prefer this over JS scroll listeners for simple reveals.
End of demo
How it works
Use animation-timeline: scroll() for page progress, or view() for element reveal. Wrap in @supports and respect prefers-reduced-motion.