🖼️ Mastering view-timeline-name in CSS

📌 What Is view-timeline-name?

The view-timeline-name property defines a view timeline for an element. A view timeline progresses based on how the element enters, moves through, and exits the viewport — enabling scroll-linked reveal animations without JavaScript. 🚀✨
Once defined, the timeline can be used with animation-timeline to animate elements based on their visibility.

>>“View timelines let elements animate as they appear — perfect for scroll-based reveals.”

🧩 Basic Syntax

Basic Syntax

view-timeline-name: timelineName;

✔ You give the element a timeline identifier (e.g., fadeTimeline).
✔ That timeline updates based on the element’s position in the viewport.

🎯 What Does a View Timeline Track?

  • Entry — when the element enters viewport
  • Containment — while the element is inside viewport
  • Exit — when the element leaves viewport

📐 Add Direction with view-timeline-axis

Timeline Axis

view-timeline-axis: block;   /* vertical scroll */
view-timeline-axis: inline; /* horizontal scroll */

✔ Use block for vertical scrolling pages (most common).

🧪 Example: Fade-In Section on Scroll

1️⃣ Define a View Timeline

Assign timeline

.section {
  view-timeline-name: reveal;
  view-timeline-axis: block;
}

2️⃣ Define the Animation

@keyframes reveal

@keyframes fadeSlide {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

3️⃣ Attach Timeline to Animation

Use animation-timeline

.section {
  animation-name: fadeSlide;
  animation-timeline: reveal;
  animation-range: entry 0% exit 100%;
  animation-fill-mode: both;
}

✔ Section fades and slides in as it enters viewport ✔ Animation finishes as it exits viewport

🎨 Example: Cards that Reveal One by One

Cards reveal

.card {
  view-timeline-name: cardTimeline;
  animation: reveal 1s ease-out;
  animation-timeline: cardTimeline;
  animation-range: entry 0% exit 90%;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

✔ Each card reveals based on its own position
✔ No JS needed for scroll detection

🎬 Example: Animate Only When in View

In-view animation

.highlight {
  view-timeline-name: highlightTimeline;
  view-timeline-axis: block;
  animation: glow 1s linear;
  animation-timeline: highlightTimeline;
  animation-range: contain 0% contain 100%;
}

@keyframes glow {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

✔ Animation runs only while the element stays inside the viewport.

📦 Full Demo Example

Full Example

.section {
  view-timeline-name: sectionTimeline;
  view-timeline-axis: block;
}

.section {
  animation: fadeUp 1s ease;
  animation-timeline: sectionTimeline;
  animation-range: entry 0% exit 100%;
  animation-fill-mode: both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

✔ This creates smooth reveal transitions across your entire page.

🧠 animation-range + view-timeline-name

Use animation-range to control when the animation starts/ends:

animation-range

animation-range: entry 20% exit 80%;
  • entry → when element hits the viewport
  • exit → when element is leaving
  • Percentages map to animation progress

⚠️ Browser Support

  • ✔ Chrome 115+
  • ✔ Edge 115+
  • ❌ Firefox (not yet supported)
  • ❌ Safari (partial implementation behind flags)

Note

View timelines are new — always ensure fallbacks and test on multiple devices.

🛠️ Best Practices

  • Use view timelines for reveal and on-scroll effects
  • Avoid animating layout-affecting properties (use transform instead)
  • Keep animations subtle and meaningful
  • Ensure elements have enough scrollable space to animate
  • Use animation-fill-mode: both for better polish

🔗 Helpful Resources

>>“view-timeline-name brings scroll-based storytelling to CSS — smooth, native, and effortless.” ✨