TIL

CSS scroll-driven animations don't need JavaScript

  • CSS
  • Performance

Chrome 115+ supports animation-timeline: scroll() natively. A reading progress bar becomes:

@keyframes progress {
  from { width: 0%; }
  to   { width: 100%; }
}

.reading-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: currentColor;
  animation: progress linear;
  animation-timeline: scroll(root);
}

Zero JavaScript. The browser syncs the animation with the document scroll. Firefox doesn’t support it yet, so keep a JS fallback for compatibility.