Version selector

This demo has several versions:

  1. CSS view() + timeline-scope
  2. JavaScript WAAPI + ViewTimeline
🏠

About this demo

This scrolled timeline traces the 12-year journey of Scroll-Driven Animations from the earliest proposal in September 2014 to becoming Baseline Newly Available in October 2026 with the release of Firefox 159.

The Code / Explanation

As you scroll down the timeline, several Scroll-Driven Animations work together:

.timeline-item .timeline-card,
.timeline-item .timeline-node {
	animation-timeline: view();
	animation-range: contain 30% contain 50%;
}

.baseline-hero {
	view-timeline-name: --tl-baseline-hero;
	animation-timeline: --tl-baseline-hero;
	animation-range: cover 20% cover 45%;
}

.baseline-browser-badge {
	animation-timeline: --tl-baseline-hero;
	animation-range: cover 30% cover 45%;
}

⚠️ Your browser does not support Scroll-driven Animations. Please use a supporting browser (Chrome 115+, Edge 115+, Safari 26+, or Firefox 159+).

Scroll-Driven Animations
Scroll-Driven Animations

The Road to Baseline Newly Available

More than a decade in the making

Scroll down the timeline to explore how Scroll-Driven Animations evolved from an early 2014 proposal into an interoperable web standard shipped across every core browser engine.

  1. CSSWG logo
    September 2014 CSSWG Proposal

    Proposal for animation triggers, timebases and additive behavior

    Apple engineers post “Proposal for animation triggers, timebases and additive behavior” to the CSSWG mailing list and mention a prototype implementation. While still rough, this proposal forms the basis of what eventually becomes scroll-driven animations.

    www-style ↗
  2. WICG logo
    September 2016 WICG Incubation

    Scroll Animations being incubated at WICG

    Initial specification work begins in the Web Incubator Community Group to bring declarative, off-main-thread scroll-linked animations to the web platform. The incubation is led by Mozilla and the work is based on the previous proposal by Apple. The feature is also pitched at TPAC.

    WICG/scroll-animations ↗
  3. Firefox logo
    December 2016 Gecko Prototype

    Mozilla starts implementing ScrollTimeline in Firefox

    Mozilla starts work on implementing the ScrollTimeline API behind a feature flag. Over time, the work eventually comes to a halt.

    treeherder.mozilla.org ↗ birtles.blog ↗
  4. CSS logo
    2019 W3C CSSWG

    Scroll Animations moved to CSSWG

    The specification graduates from WICG and moves into the W3C CSS Working Group repository as scroll-animations-1 for formal standardization.

    w3c/csswg-drafts/scroll-animations-1 ↗
  5. Chromium logo
    2020 Chromium Prototype

    Scroll Animations with @scroll-timeline ready for testing in Chromium

    Led by Chrome Engineers at Google, an experimental prototype lands in Chromium, giving developers hands-on testing with the early @scroll-timeline at-rule and descriptor syntax behind a flag.

  6. CSS logo
    2022 Modern API Architecture

    Rewrite of the spec to use scroll-timeline/scroll() and view-timeline/view()

    Following discussions that started in 2021 at the CSSWG, a major specification overhaul replaces @scroll-timeline with ergonomic element properties and functional notations for Scroll Progress and View Progress Timelines.

    w3c/csswg-drafts#6674 ↗ w3c/csswg-drafts@709371b ↗
  7. Chrome logo
    July 2023 Blink Engine

    Chrome 115 ships Scroll-Driven Animations

    Chrome 115 launches full support for scroll(), view(), scroll-timeline, view-timeline, timeline-scope, and WAAPI ScrollTimeline & ViewTimeline.

  8. Edge logo
    July 2023 Blink Engine

    Edge 115 ships Scroll-Driven Animations

    Microsoft Edge 115 releases simultaneously alongside Chrome 115, bringing hardware-accelerated Scroll-Driven Animations across the Chromium ecosystem.

  9. May 2024 Chrome DevRel

    Chrome DevRel releases a free 10-part video course

    A comprehensive 10-part video series dives deep into Scroll-Driven Animations, covering scroll(), view(), timeline ranges, and practical UI patterns.

    Watch on YouTube ↗
  10. Safari logo
    September 2025 WebKit Engine

    Safari 26 ships Scroll-Driven Animations

    Apple ships Scroll-Driven Animations in Safari 26 across macOS, iOS, and iPadOS, bringing native scroll-driven motion to WebKit.

  11. Firefox logo
    October 2026 Gecko Engine

    Firefox 159 completes all browser engines

    Mozilla ships Scroll-Driven Animations in Firefox 159, bringing native Gecko support and completing support across all major browser engines.

🎉 October 2026 · Baseline Milestone

Baseline Newly Available

Twelve years after the first proposal, Scroll-Driven Animations are officially interoperable across all core browser engines!

Chrome 115 July 2023
Edge 115 July 2023
Safari 26 Sept 2025
Firefox 159 Oct 2026
Check out more demos and tools at scroll-driven-animations.style →