Scroll-Driven Animations

#animation-timeline: scroll()scroll-timeline

Drive keyframes directly from scroll progression.

live_demo

code

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

.scroll-progress {
  position: sticky;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #1d7f53, #249565);
  transform-origin: 0 0;
  scale: 0 1;
  animation: progress-fill linear;
  animation-timeline: scroll(nearest);
}