CSS scroll-timeline-name Property

Code Examples

A basic example showing a progress bar that fills up as you scroll through a specific container.

<style>
.scroll-container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --main-timeline;
  border: 5px solid #333333;
}
.content {
  height: 1000px;
  background: linear-gradient(#ffffff, #000000);
}
.progress-bar {
  height: 20px;
  background: #00ff00;
  width: 0%;
  position: fixed;
  top: 0;
  animation: grow auto linear;
  animation-timeline: --main-timeline;
}
@keyframes grow {
  to { width: 100%; }
}
</style>
<div class="progress-bar"></div>
<div class="scroll-container">
  <div class="content">Scroll down to see the bar grow.</div>
</div>

An advanced example using JavaScript to dynamically update the scroll-timeline-name and re-link an animated element to the new identifier.

<style>
#scroller {
  height: 200px;
  overflow: auto;
  scroll-timeline-name: --dynamic-timeline;
  background: #f0f0f0;
}
.box {
  width: 50px;
  height: 50px;
  background: #ff0000;
  animation: rotate auto linear;
  animation-timeline: --dynamic-timeline;
}
@keyframes rotate {
  to { transform: rotate(360deg); }
}
</style>
<div id="scroller">
  <div style="height: 800px;">Scroll me to rotate the red box.</div>
</div>
<div class="box"></div>
<button onclick="changeTimeline()">Change Timeline via JS</button>
<script>
function changeTimeline() {
  const scroller = document.getElementById("scroller");
  const newName = "--new-timeline-name";
  scroller.style.setProperty("scroll-timeline-name", newName);
  document.querySelector(".box").style.animationTimeline = newName;
  console.log("Timeline name updated to: " + newName);
}
</script>

Pro Tip

You can use the scroll-timeline shorthand property to define both the name and the axis in a single line. It is much cleaner for your production code and keeps related logic together.