Scroll-driven Animations

Scroll-driven Animations

Drive CSS animations by how far you've SCROLLED, no JavaScript scroll listeners!

animation-timeline: scroll()

.progress-bar {
  animation: grow linear;
  animation-timeline: scroll(nearest block);  /* based on scroll */
}
@keyframes grow {
  from { width: 0%; }
  to   { width: 100%; }
}

view()

Trigger based on the element's position in the viewport:

.card {
  animation: pop linear;
  animation-timeline: view(block);
}
@keyframes pop {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

Common examples

• Scroll progress bars.
• Reveal-on-scroll animations.
• Parallax-ish effects.

TL;DR

• animation-timeline: scroll() uses the scroller progress.
• view() uses when the element crosses the viewport.
• Keyframes animate 0%-100% across that timeline.
• Cleaner than JS IntersectionObserver for simple reveals.