CSS Scroll-Driven Animations: animation-timeline, scroll() and view()

Badar KhalilUpdated September 30, 2026 5 min read

What are scroll-driven animations?

CSS scroll-driven animations link the progress of an animation to scrolling instead of time. Scroll down and the animation plays forward; scroll up and it plays backward. You get reading progress bars, reveal-on-scroll effects, parallax and sticky header changes using only CSS, with no scroll event listeners or IntersectionObserver. Because they can run off the main thread in supporting browsers, they are often smoother than JavaScript solutions.

Focus keyword: CSS scroll-driven animations. Related trending keywords: animation-timeline, scroll progress bar CSS, view() timeline, animation-range, scroll reveal animation without JavaScript, CSS parallax, scroll-timeline, view-timeline.

Two kinds of timelines

Scroll progress timeline: progress equals how far a scroll container has been scrolled (0% at the top, 100% at the bottom). Created with scroll() or scroll-timeline. Best for page progress bars and parallax.
View progress timeline: progress equals how much an element has moved through the scrollport (from entering to leaving). Created with view() or view-timeline. Best for reveal-on-scroll and per-element effects.

The core syntax

1) Write normal @keyframes. 2) Attach them with animation (duration is ignored by scroll timelines, but set linear easing in most cases). 3) Set animation-timeline.

animation-timeline: scroll(): nearest ancestor scroller. Arguments: scroller (nearest, root, self) and axis (block, inline, y, x). Example: scroll(root block).
animation-timeline: view(): progress based on the element's own visibility in the scrollport. You can add an axis and an inset.
Named timelines: scroll-timeline-name: --page on a scroller, or view-timeline-name: --card on a subject, then animation-timeline: --page elsewhere. Use timeline-scope to share a timeline with elements that are not descendants.

animation-range: choose when it plays

The animation-range property limits which part of the timeline drives the animation. For view timelines you can use named ranges:

entry: while the element is entering the scrollport.
exit: while it is leaving.
cover: from first touching to fully leaving.
contain: while fully visible inside the scrollport.

Example: animation-range: entry 0% entry 100%; makes a reveal finish exactly when the element is fully in view. You can also use animation-range: entry 10% cover 40%, or plain lengths and percentages.

Progressive enhancement and fallback

Support is excellent in Chromium browsers and is rolling out to others, so treat scroll-driven animation as an enhancement. Wrap it in @supports (animation-timeline: scroll()), and make sure the page works with no animation at all. A good rule: elements must be visible and usable by default, and only hidden (for example with opacity: 0) inside the @supports block. Check current browser support on Can I use before relying on it for essential UI.

Accessibility and performance

Wrap movement-heavy effects in @media (prefers-reduced-motion: no-preference).
Animate transform, opacity and clip-path. Avoid properties that trigger layout.
Avoid parallax that moves large areas quickly, because it can trigger motion sickness.
Do not tie critical information (like form errors) to scroll-only reveals.

Common mistakes

Setting the animation shorthand after animation-timeline. The shorthand resets the timeline, so declare animation-timeline after it.
Forgetting animation-fill-mode: both, so elements flash back to their original state outside the range.
Expecting time-based easing. Use linear so the animation tracks scroll position exactly.
Using overflow: hidden on the wrong ancestor, which makes it the nearest scroller instead of the page.

Quick summary

CSS scroll-driven animations use animation-timeline with scroll() or view() to bind keyframes to scrolling, and animation-range to choose when they play. Always add @supports and reduced-motion guards.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  .bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background: #6366f1; z-index: 10; transform-origin: 0 50%; transform: scaleX(0); }
  @supports (animation-timeline: scroll()) {
    .bar { animation: grow linear both; animation-timeline: scroll(root block); }
  }
  @keyframes grow { to { transform: scaleX(1); } }
  article { max-width: 560px; margin: 0 auto; padding: 30px 20px; line-height: 1.7; }
</style>
<div class='bar'></div>
<article id='art'></article>
<script>
  var html = '<h1>Reading progress</h1>';
  for (var i = 1; i <= 25; i++) { html += '<p>Paragraph ' + i + '. Scroll down to watch the bar at the top fill up. The animation is driven by scroll position, not by time.</p>'; }
  document.getElementById('art').innerHTML = html;
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: system-ui, sans-serif; background: #f8fafc; }
  .spacer { height: 70vh; display: grid; place-items: center; color: #64748b; }
  .card { width: min(420px, 90%); margin: 0 auto 40px; padding: 28px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .card { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    }
  }
  @keyframes reveal { from { opacity: 0; transform: translateY(60px) scale(.95); } to { opacity: 1; transform: none; } }
</style>
<div class='spacer'>Scroll down</div>
<div class='card'><h3>Card one</h3><p>Fades and slides in as it enters the viewport.</p></div>
<div class='card'><h3>Card two</h3><p>No JavaScript or IntersectionObserver needed.</p></div>
<div class='card'><h3>Card three</h3><p>Content stays visible in browsers without support.</p></div>
<div class='card'><h3>Card four</h3><p>That is progressive enhancement.</p></div>
<div class='spacer'></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  .hero { height: 60vh; overflow: hidden; position: relative; display: grid; place-items: center; background: #0f172a; color: #fff; }
  .hero .bg { position: absolute; inset: -20% 0; background: radial-gradient(circle at 30% 30%, #6366f1, transparent 60%), radial-gradient(circle at 70% 70%, #ec4899, transparent 55%); }
  .hero h1 { position: relative; margin: 0; font-size: 36px; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .hero .bg { animation: parallax linear both; animation-timeline: view(); animation-range: cover; }
    }
  }
  @keyframes parallax { from { transform: translateY(-15%); } to { transform: translateY(15%); } }
  .content { height: 120vh; padding: 30px; }
</style>
<div class='content'>Scroll down a little to see the parallax hero.</div>
<div class='hero'><div class='bg'></div><h1>Subtle CSS parallax</h1></div>
<div class='content'>Keep parallax movement small for comfort.</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  .scroller { width: 360px; height: 220px; overflow-y: auto; border: 2px solid #cbd5e1; border-radius: 12px; margin: 20px; position: relative; scroll-timeline: --box block; }
  .meter { position: sticky; top: 0; height: 6px; background: #10b981; transform-origin: 0 50%; transform: scaleX(0); }
  @supports (animation-timeline: scroll()) {
    .meter { animation: fill linear both; animation-timeline: --box; }
  }
  @keyframes fill { to { transform: scaleX(1); } }
  .scroller p { padding: 0 14px; line-height: 1.6; }
</style>
<div class='scroller'>
  <div class='meter'></div>
  <p>Named scroll timeline on an inner scroll container.</p>
  <p>The meter reads the progress of this box, not the page.</p>
  <p>Keep scrolling inside this box.</p>
  <p>The timeline name is --box.</p>
  <p>Use timeline-scope to share names across siblings.</p>
  <p>Almost there.</p>
  <p>The end.</p>
</div>

Output

Press Run to execute.

Exercise: Shrink a sticky header on scrollHTML

Use animation-timeline: scroll() to shrink the header padding from 24px to 8px and reduce its font size while the user scrolls the first 150px. Use animation-range with lengths, wrap it in @supports, and disable it for users who prefer reduced motion.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  header { position: sticky; top: 0; padding: 24px; background: #0f172a; color: #fff; font-size: 28px; }
  /* TODO: @keyframes shrink */
  /* TODO: @supports + animation-timeline + animation-range: 0 150px */
  main { height: 200vh; padding: 20px; }
</style>
<header>My Site</header>
<main>Scroll down</main>

Output

Press Run to execute.

Show expected output

As you scroll the first 150px, the sticky header smoothly becomes shorter with a smaller title. Browsers without support show the normal header.

This is a self-check — compare your result with the expected output above.

Was this page helpful?