Scroll-driven animations

Try: Scroll inside the box. Panels fade/slide in as they enter the visible region.

Scroll down ↓

First panel

Uses animation-timeline: view() and animation-range: entry … cover ….

Second panel

No scroll listeners—progress ties to scroll position on the compositor side where supported.

Third panel

Compare to IntersectionObserver + class toggles for one-shot reveals.

End

Source

@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.panel {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}

Support: Chromium excellent; Safari 26+ improving; Firefox partial—if panels don’t animate, they still render. Check current Baseline for scroll-driven animations.