Scroll-Driven Animations

#animation-timeline: scroll()scroll-timeline

Tie any animation to scroll position. No IntersectionObserver, no scroll events, no JavaScript. Watch the gradient progress bar fill as you scroll.

live_demo

code

.progress {
  scale: 0 1;
  transform-origin: 0 0;
  animation: fill linear;
  animation-timeline: scroll(root);
}

@keyframes fill { to { scale: 1 1; } }