Scroll-driven animations

Limited support Reference ↗

A scroll timeline connects CSS animation progress to scrolling instead of time. Reading indicators no longer need a scroll listener.

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

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

Keep decorative motion behind a prefers-reduced-motion check, and make sure the UI remains understandable when the animation is absent.