TIL

CSS scroll-driven animations não precisam de JavaScript

  • CSS
  • Performance

O Chrome 115+ suporta animation-timeline: scroll() nativamente. Com isso, uma barra de progresso de leitura fica assim:

@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. O browser sincroniza a animação com o scroll do documento. Firefox ainda não suporta, então vale manter um fallback via JS para compatibilidade.