CSS view-timeline 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 property lets an element define a temporal "view" that maps the element’s scrolling or visibility progress into a timeline that other animation mechanisms can use as a driver. Instead of animations progressing solely along wall-clock time, a view timeline expresses progress in terms of how an element is revealed, scrolled, or intersected by a viewport or container; that progress then becomes the time axis for animations. This makes it straightforward to tie animation progress directly to user scrolling, element visibility, or relative position, so motion can feel directly connected to user input and layout changes.

When you use a view timeline you typically pair it with the normal CSS animation system so that an animation’s playback is driven by the timeline rather than only by real time. That relationship is how you can make an animation scrub as the user scrolls; the animation’s timing is taken from the timeline instead of the document clock, which lets visual states follow scrolling precisely. To connect animations to a timeline you work with the same animation mechanisms you already know from the animation property and related animation declarations, but the key difference is that progress is driven by view position rather than elapsed seconds.

Because view timelines are driven by scrolling and visibility, they interact closely with how an element’s scroll container is formed and behaves. The scrollability of the container and whether the element participates in normal scrolling flow affects the timeline’s progress - properties that control scrolling behavior such as overflow determine whether a container provides a scrollport that the timeline can use. Combining view timelines with scroll-related layout features (for example, snap points or virtualized lists) can produce expressive interfaces, but it also requires attention to performance: timelines that trigger complex layout changes can force reflows as the user scrolls. For smooth results prefer compositor-friendly properties (transform and opacity), minimize layout work in scroll-driven updates, and be mindful of how features like scroll-snap-type or heavy painting interact with the intended scrubbing behavior.

Definition

Initial value: see individual properties
Applies to: all elements
Inherited: no
Computed value: see individual properties
Animatable: see individual properties
JavaScript syntax: object.style.viewTimeline

Syntax

view-timeline: <timeline-name> [<timeline-axis>]?;

Values

<timeline-name>The name of the timeline you want the element to be associated with.
<timeline-axis>(optional) - The axis along which the timeline operates. Commonly block or inline.

Example

HTML

<div class="scroll-container">

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

  

  <div class="animation-target">

    <div class="progress-bar"></div>

    <p>I am tracking my own progress through the viewport!</p>

  </div>

  

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

</div>

CSS

/* Setup for the scrolling experience */
.spacer {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  font-family: sans-serif;
  color: #666;
}

/* 1. Define the Timeline */
.animation-target {
  height: 300px;
  background: #fff;
  border: 2px solid #333;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* Give the timeline a name and specify the axis */
  view-timeline-name: --subjectReveal;
  view-timeline-axis: block;
}

/* 2. Define the Animation */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 3. Link the Animation to the Timeline */
.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #007bff;
  transform-origin: left;
  
  /* Instead of a duration (like 2s), we use the timeline name */
  animation-name: grow-progress;
  animation-timeline: --subjectReveal;
  
  /* Ensure the animation doesn't reset immediately */
  animation-fill-mode: both;
}

Result

Editor

Browser Support

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