Scroll-Driven Animations

Key insights

• animation-timeline: scroll() turns the scrollbar itself into an animation controller — no JavaScript, no IntersectionObserver, just two lines of CSS.
• animation-range sets the exact trigger point, so an animation can fire on entry, on exit, or anywhere in between the scroll.
• view() targets individual elements — each card or image animates the moment it enters the viewport, entirely on autopilot.
• Parallax that once took ~30 lines of JS and a scroll-event listener is now pure CSS: give layers different speeds with zero dependencies.
• Layer these on top of position: sticky to build shrinking headers, reading-progress bars, and sidebars that transform as you scroll.

Do / Don't

• Do: Reach for animation-timeline: scroll() and view() to tie motion to scroll position natively.
• Do: Combine sticky positioning with a scroll timeline for shrinking headers and reading-progress bars.
• Don't: Hand-roll parallax or reveals with a scroll listener and getBoundingClientRect() that CSS now drives on its own.
• Don't: Pull in a JS animation library for effects the browser handles in a couple of CSS lines.