Scroll-Driven Demo - View Transitions Toolkit

← Back

Scroll-Driven View Transition

When scrolling the page, the header card will toggle between the large and small state. This is acthieve by starting a View Transition that is immediately paused and then scrubbed based on the scroll position.

The Code

Between two scroll positions a View Transition is started and, once started, immediately paused and scrubbed based on the scroll position.

const startViewTransition = async () => {
  document.startViewTransition(() => {
    document.querySelector(".card").classList.toggle("small");
  });
  await document.activeViewTransition.ready;
  pause(document.activeViewTransition);
};

const updateAnimations = () => {
  scrub(document.activeViewTransition, scrollProgress);
};

When scrolling back the animations need to play in reverse. This is achieved by reversing the animations and scrubbing from 1 to 0.

if (isReverse) {
    for (const anim of getAnimations(document.activeViewTransition)) {
    anim.reverse();
    }
}

Functions Used

This demo uses trackActiveViewTransition, getAnimations, and utilities like pause / scrub to synchronize a View Transition with scroll state:

import { trackActiveViewTransition } from "view-transitions-toolkit/track-active-view-transition";
import { getAnimations } from "view-transitions-toolkit/animations";
import { pause, scrub } from "view-transitions-toolkit/playback-control";

Read more in the documentation for trackActiveViewTransition, animations, and playback control.