CSS view-timeline Property

Code Examples

A basic example showing an element that fades and scales as it enters the viewport during a scroll.

<style>
  .spacer { height: 100vh; }
  .reveal-box {
    width: 200px; height: 200px;
    background-color: #3498db;
    margin: 50px auto;
    view-timeline: --box-reveal block;
    animation: fade-and-scale linear both;
    animation-timeline: --box-reveal;
  }
  @keyframes fade-and-scale {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
  }
</style>
<div class="spacer"></div>
<div class="reveal-box"></div>
<div class="spacer"></div>

An advanced implementation using a sticky indicator that grows as the user scrolls, featuring a JavaScript support check.

<style>
  #scroll-container {
    height: 400px; overflow-y: scroll;
    background-color: #eeeeee;
    border: 2px solid #333333;
  }
  .content-block {
    height: 800px; padding: 20px;
  }
  .indicator {
    height: 10px; background-color: #e74c3c;
    width: 0%; position: sticky; top: 0;
    view-timeline: --scroll-path block;
    animation: progress-grow linear both;
    animation-timeline: --scroll-path;
  }
  @keyframes progress-grow {
    from { width: 0%; }
    to { width: 100%; }
  }
</style>
<div id="scroll-container">
  <div class="indicator" id="myIndicator"></div>
  <div class="content-block">
    <h2>Scroll down to see the progress bar grow</h2>
  </div>
</div>
<script>
  const indicator = document.getElementById("myIndicator");
  // Check if view-timeline is supported, otherwise fallback
  if (!CSS.supports("view-timeline", "--test block")) {
    console.log("View Timeline not supported. Using JS fallback logic.");
    indicator.style.backgroundColor = "#cccccc";
  }
</script>

Pro Tip

While you can use the view() function for quick one-off animations, using view-timeline is much better for complex scenes where multiple different elements need to react to the scroll progress of one specific target element.