Scroll-driven animations connect a CSS animation to scroll progress instead of time. Nice for reading indicators, reveal effects, and small UI feedback without scroll listeners.

@keyframes grow {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

.progress {
  animation: grow linear;
  animation-timeline: scroll(root block);
  transform-origin: left;
}

Respect prefers-reduced-motion for decorative effects. More info on MDN.