How to Configure Strict CSS View-Transition-Old and New Animation-Timeline in Google Chrome

The convergence of the View Transition API and the Scroll-Driven Animations specification in Chromium opens extraordinary creative possibilities for modern web applications. Traditionally, view transitions execute along a time-based duration (e.g., 300ms) driven by the document timeline. However, with CSS scroll-driven animations, developers can bind the interpolation of ::view-transition-old and ::view-transition-new directly to an element’s scroll offset or view progress using animation-timeline: scroll() or view().

Configuring strict animation-timeline properties in Google Chrome allows developers to construct interactive, scroll-linked morphing transitions—such as expanding a header into a fullscreen hero or collapsing cards on scroll—without JavaScript scroll listeners or performance-degrading layout thrashing.

Chromium Scroll-Driven Transition Architecture

Chromium evaluates animation-timeline across both real DOM elements and generated pseudo-elements:

::view-transition
 └─ ::view-transition-group(header-banner)
     └─ ::view-transition-image-pair(header-banner)
         ├─ ::view-transition-old(header-banner)
         └─ ::view-transition-new(header-banner)

By declaring a named scroll timeline on a scrollable container via scroll-timeline-name, view transition pseudo-elements can link their keyframe progression directly to the user’s scroll position:

/* Establish named scroll timeline on the scrollable container */
.scroll-container {
    overflow-y: auto;
    scroll-timeline-name: --page-scroll;
    scroll-timeline-axis: block;
}

/* Bind view transition pseudo-elements to the scroll timeline */
::view-transition-group(header-banner) {
    animation-timeline: --page-scroll;
    animation-duration: auto;
}

::view-transition-old(header-banner) {
    animation: fade-out linear both;
    animation-timeline: --page-scroll;
}

::view-transition-new(header-banner) {
    animation: fade-in linear both;
    animation-timeline: --page-scroll;
}

Defining Scroll-Linked Keyframe Interpolation

When an animation is driven by a scroll timeline, keyframes map directly to scroll percentages (0% to 100%):

@keyframes header-collapse {
    0% {
        transform: scale(1);
        filter: blur(0px);
    }
    100% {
        transform: scale(0.85);
        filter: blur(4px);
    }
}

::view-transition-old(header-banner) {
    animation-name: header-collapse;
    animation-timeline: --page-scroll;
    animation-range: entry 0% exit 100%;
}

Inspecting Scroll Timelines in Chrome DevTools

To inspect and audit scroll-driven view transitions in Google Chrome:

1. Open DevTools (F12) and navigate to the Elements panel.
2. Select the scroll container and verify in the Styles panel that scroll-timeline-name is declared and resolved.
3. Open the Animations drawer via Ctrl+Shift+P > Show Animations.
4. Scroll the container. Chrome DevTools visualizes the progress scrubber tracking with your scroll gestures.
5. Inspect the computed styles on ::view-transition-group to confirm that animation-timeline resolves to the active scroll container.

Configuring strict animation-timeline properties enables high-performance, scroll-driven visual transitions in Google Chrome.