CSS view-timeline Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Setup for the scrolling experience */
.spacer {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  font-family: sans-serif;
  color: #666;
}

/* 1. Define the Timeline */
.animation-target {
  height: 300px;
  background: #fff;
  border: 2px solid #333;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* Give the timeline a name and specify the axis */
  view-timeline-name: --subjectReveal;
  view-timeline-axis: block;
}

/* 2. Define the Animation */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 3. Link the Animation to the Timeline */
.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #007bff;
  transform-origin: left;
  
  /* Instead of a duration (like 2s), we use the timeline name */
  animation-name: grow-progress;
  animation-timeline: --subjectReveal;
  
  /* Ensure the animation doesn't reset immediately */
  animation-fill-mode: both;
}</style></head><body><div class="scroll-container">
  <div class="spacer">Scroll down to see the animation...</div>
  
  <div class="animation-target">
    <div class="progress-bar"></div>
    <p>I am tracking my own progress through the viewport!</p>
  </div>
  
  <div class="spacer">Keep scrolling past me...</div>
</div></body></html>