Scroll Animation

Previously, for effects depending on page scroll, we needed heavy JavaScript. Now CSS can do it itself.

animation-timeline: scroll()

Animation is tied not to time (seconds), but to scroll progress. You scroll mouse wheel — animation plays. You scroll back — animation rewinds.

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

.progress-bar {
  animation: progress auto linear;
  animation-timeline: scroll(); /* Reading progress line */
}