CSS view-timeline-name Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The view-timeline-name property lets authors assign an identifier to a view timeline created on an element, effectively labeling that element’s timeline so it can be referenced elsewhere in CSS. The property itself does not define the geometry or behavior of the timeline - it simply provides a stable name that other timeline-aware properties and rules can use to bind animations to the element’s viewport-relative progress. Think of it as naming a coordinate system so animations or timeline consumers can point to the correct source of progress values.

A view timeline represents how an element’s position or visibility maps into a normalized progress range; naming that timeline makes it practical to target it from animation and timeline properties. For example, you can reference a named view timeline from an animation’s timeline binding to have that animation progress follow the element’s movement relative to a reference box rather than the document scroll. This linking is typically done with timeline-binding properties such as animation-timeline, which use the name supplied by view-timeline-name to select the appropriate timeline.

The name is independent of how the timeline calculates progress: axis, inset, and other view-timeline configuration properties control the mapping, while the name only identifies it. For properties that alter the mapping or reference frame you would pair the name with settings like view-timeline-axis or view-timeline-inset; together they let you both define the timeline’s geometry and expose it under a predictable label for reuse. Because the name serves as a plain identifier, it’s important to choose unique, descriptive names (especially inside component libraries) so different timelines don’t collide unintentionally.

In practice, applying view-timeline-name to an element that establishes a view timeline enables modular animation patterns: components can expose a timeline by name and consumers (other rules or animations) can hook into that timeline without tightly coupling to the element’s structure. If the property is set on an element that does not establish a view timeline, it has no effect beyond being a harmless identifier; authors should ensure the element is one that creates a view timeline (for example by being a suitable reference or scroll container) if they expect the name to be usable by animations or timeline consumers.

Definition

Initial value: none
Applies to: all elements
Inherited: no
Computed value: the keyword none or a list of CSS identifiers
Animatable: no
JavaScript syntax: object.style.viewTimelineName

Syntax

view-timeline-name: none | <custom-ident>;

Values

noneThe element will not be linked to any scroll timeline.
<custom-ident>The name of a scroll timeline you have defined elsewhere using @scroll-timeline

Example

HTML

<div class="container">

  <div class="spacer">Scroll down to see the effect...</div>

  

  <div class="animating-box">I rotate as I scroll</div>

  

  <div class="spacer">Keep scrolling...</div>

</div>

CSS

/* 1. Define the scrollable area */
.container {
  height: 400px;
  overflow-y: scroll;
  border: 2px solid #ccc;
  padding: 20px;
}

.spacer {
  height: 800px;
  background: linear-gradient(to bottom, #f9f9f9, #eee);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2. The target element */
.animating-box {
  width: 150px;
  height: 150px;
  margin: 50px auto;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  text-align: center;
  font-weight: bold;

  /* Create the timeline name */
  view-timeline-name: --box-visibility;
  view-timeline-axis: block;

  /* Attach the animation to the named timeline */
  animation-name: rotateIn;
  animation-fill-mode: both;
  animation-timeline: --box-visibility;
}

/* 3. The animation keyframes */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS view-timeline-name property. Hover over a browser icon to see the version that first introduced support for this CSS property.