CSS scroll-timeline-axis Property

Code Examples

A basic vertical scroll tracker that expands a progress bar at the top of the page as the user scrolls through a specific container.

<div id="container">
  <div id="content">
    Scroll down to see the progress.
  </div>
</div>
<div id="progress-bar"></div>

<style>
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --scroll-progress;
  scroll-timeline-axis: block;
  border: 2px solid #333333;
}
#content {
  height: 1000px;
  background: linear-gradient(#ffffff, #eeeeee);
}
#progress-bar {
  height: 20px;
  background: #00ff00;
  width: 0%;
  position: fixed;
  top: 0;
  animation: grow-progress auto linear forwards;
  animation-timeline: --scroll-progress;
}
@keyframes grow-progress {
  to { width: 100%; }
}
</style>

An advanced horizontal gallery where items fade and scale as the user scrolls horizontally, including a JavaScript snippet to verify the axis.

<div id="gallery">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
#gallery {
  display: flex;
  overflow-x: auto;
  width: 100%;
  scroll-timeline-name: --gallery-scroll;
  scroll-timeline-axis: inline;
  padding: 20px;
  gap: 20px;
}
.item {
  min-width: 80%;
  height: 200px;
  background: #222222;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  animation: fade-in auto linear forwards;
  animation-timeline: --gallery-scroll;
}
@keyframes fade-in {
  from { opacity: 0.2; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
</style>

<script>
// Log the scroll timeline axis via JS for debugging
const gallery = document.getElementById("gallery");
const currentAxis = getComputedStyle(gallery).scrollTimelineAxis;
console.log("Current animation axis is: " + currentAxis);
</script>

Pro Tip

Instead of writing separate lines for name and axis, use the shorthand: scroll-timeline: --myTimeline block;. It makes your code cleaner and harder to break. You can also use the view() function for simpler scroll-driven animations if you only need to track an element as it enters the viewport, rather than tracking a specific scroll container.