CSS scroll-driven animations don't need JavaScript
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.