Scroll-driven animations

CSS animations whose progress is driven by scrolling rather than by time — animation-timeline: scroll() ties the animation to a scroll container’s position, animation-timeline: view() to an element’s progress through the viewport — so a reading-progress bar, a parallax layer or a reveal-on-scroll needs no scroll listener and runs off the main thread

What used to be an IntersectionObserver or, worse, a scroll listener with requestAnimationFrame, is a declaration: a view() timeline with animation-range: entry 0% entry 100% fades an element in as it enters. The browser runs it on the compositor, so it cannot jank the way a JavaScript scroll handler can. Chromium and Safari have shipped it; Firefox is behind a flag, so it is a progressive enhancement, and prefers-reduced-motion applies as it does to any animation. The figures on this site are still; this is how they would draw themselves as a reader arrives at them.