CSS view-timeline-axis Property

Code Examples

A basic example showing how to trigger a fade-in animation as a red box enters the vertical scroll view.

<style>
.scroll-container {
  height: 400px;
  overflow-y: scroll;
  background: #f4f4f4;
}
.spacer {
  height: 800px;
}
.reveal-box {
  width: 100px;
  height: 100px;
  background: #ff0000;
  view-timeline-name: --revealer;
  view-timeline-axis: block;
  animation: fade-in linear both;
  animation-timeline: --revealer;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>
<div class="scroll-container">
  <div class="spacer"></div>
  <div class="reveal-box"></div>
  <div class="spacer"></div>
</div>

An advanced horizontal gallery where items scale up as they pass the center of the viewport, including a JS toggle for the axis.

<style>
.gallery {
  display: flex;
  overflow-x: auto;
  width: 100%;
  gap: 20px;
}
.item {
  flex: 0 0 300px;
  height: 200px;
  background: #007bff;
  view-timeline-name: --item-scan;
  view-timeline-axis: inline;
  animation: scale-up linear both;
  animation-timeline: --item-scan;
}
@keyframes scale-up {
  0% { transform: scale(0.5); }
  50% { transform: scale(1); }
  100% { transform: scale(0.5); }
}
</style>
<div class="gallery" id="mainGallery">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<script>
const gallery = document.getElementById("mainGallery");
gallery.addEventListener("click", () => {
  const items = document.querySelectorAll(".item");
  items.forEach(item => {
    item.style.viewTimelineAxis = "x";
    console.log("Axis explicitly set to X for horizontal tracking");
  });
});
</script>

Pro Tip

You can use the shorthand view-timeline property to set both the name and the axis in a single line, keeping your CSS clean and much easier to manage.