CSS view-timeline-name Property

Defines a unique name for a scroll-progress timeline that tracks an element's visibility within its scrollport.

selector { view-timeline-name: <dashed-ident>; }
none No view progress timeline is created for the element.
<dashed-ident> A custom identifier starting with two dashes that names the timeline for reference in other properties.

Code Examples

A basic example showing a box that fades and scales in as it enters the scrollable container's viewport.

<style>
.container { height: 400px; overflow-y: scroll; border: 2px solid #333333; }
.spacer { height: 600px; }
.box {
  width: 100px; height: 100px; background-color: #0077ff;
  view-timeline-name: --reveal-box;
  view-timeline-axis: block;
  animation: fade-in linear both;
  animation-timeline: --reveal-box;
}
@keyframes fade-in {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}
</style>
<div class="container">
  <div class="spacer"></div>
  <div class="box"></div>
  <div class="spacer"></div>
</div>

An advanced implementation using JavaScript to dynamically assign unique timeline names to multiple list items for individual scroll-tracking.

<style>
.scroller { height: 500px; overflow-y: auto; background: #eeeeee; }
.list-item {
  margin: 100px 20px; padding: 30px; background: #ffffff; border-radius: 8px;
  box-shadow: 0 4px #cccccc;
  animation: slide-in linear both;
}
@keyframes slide-in {
  0% { transform: translateX(-100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
</style>
<div class="scroller" id="main-list">
  <div class="list-item">Item 1</div>
  <div class="list-item">Item 2</div>
  <div class="list-item">Item 3</div>
</div>
<script>
const items = document.querySelectorAll(".list-item");
items.forEach((item, i) => {
  const name = "--item-line-" + i;
  item.style.viewTimelineName = name;
  item.style.setProperty("animation-timeline", name);
  item.style.setProperty("border-left", "5px solid #ff0000");
});
</script>

Pro Tip

You can use the same view-timeline-name to sync multiple different animations on different elements to the scroll progress of one specific "trigger" element. This allows for complex, coordinated scenes where several things happen at once based on one object's position on the screen.

Deep Dive

Think of this property as setting up a custom "radio station" for an element. When an element moves through the visible area of a scroll container, it broadcasts its progress. By assigning a name with the double-dash prefix, like "--my-element-view", you are creating a signal that other animations can tune into using the animation-timeline property. Unlike a standard scroll-timeline which tracks the entire container's scroll position from top to bottom, the view-timeline specifically tracks the element's entry into the viewport, its transit across it, and its eventual exit. It is the key to creating those slick reveal effects where items animate in only when they are actually seen by the user. This property specifically handles the naming aspect of the timeline, allowing the browser to link the tracked element to the animation logic.

Best Practices

Always use descriptive names for your timelines to keep your code readable, such as "--image-reveal-status". Make sure the element you are tracking actually has enough room to scroll through the container, or the timeline won't have enough "track" to run the animation properly. It is also good practice to define the axis explicitly using view-timeline-axis if you aren't using the shorthand property, so the browser knows whether to track vertical or horizontal movement.

Common Pitfalls

A very common mistake is forgetting the double-dash prefix required for custom identifiers; without those dashes, the browser will ignore the name. Another issue is applying this to elements with "display: none", as they don't have a box in the layout and therefore cannot produce a visibility timeline. Also, keep in mind that this property only names the timeline; it doesn't actually trigger the animation. You must still link that name to an animation using the "animation-timeline" property on the element you want to animate.

Accessibility

Scroll-driven animations can be disorienting or cause motion sickness for some users. You should always wrap your animation styles in a "prefers-reduced-motion: reduce" media query to disable or simplify the effect for users who have requested less motion in their system settings.

Dev Data Table: view-timeline-name property

default none
animatable no
inherited no
experimental no
year_intro 2022
year_standard 0
js_syntax_1 element.style.viewTimelineName = "--my-timeline";
js_syntax_2 element.style.setProperty("view-timeline-name", "--my-timeline");
js_note When setting this property via JavaScript, ensure you include the required double-dash prefix for the timeline name string.
browsers { "Chrome": 115, "Edge": 115, "Firefox": 0, "Safari": 0, "Opera": 101, "Chrome Android": 115, "Safari on iOS": 0, "Samsung Internet": 23, "Opera Mobile": 77 }
results render here...