The Toolkit
The Toolkit consists of several modules, each providing a set of utility functions:
- Feature Detection: Get information about whether certain View Transitions subfeatures are supported.
-
Shim Support: Shim support for
document.activeViewTransition. - Animations: Utilities for extracting, measuring, and optimizing animations.
- Transition Playback Control: Pause, Resume, or Scrub the playback of a View Transition.
- Automatic Page Navigation Types: Automatically inject View Transition Types based on navigation origin/destination.
-
Misc Utilities: Other helper functions like
setandTemporary View Transition Names extract.View Transition Name
Check out the demos below to see these functions in action, or check the documentation for detailed information about each function. The complete source code is available on GitHub.
Getting Started
Install the toolkit using your favorite package manager, for example using NPM:
npm i view-transitions-toolkitOnce installed, import the functions you need from the specific entry points. For example:
import { getAnimations } from 'view-transitions-toolkit/animations'Check out the demos for an introduction to the functions, or find detailed information in the documentation.
Demos
Feature Detection
Get information about whether certain View Transitions subfeatures are supported.
Animations: getAnimations
Track and inspect animations during view transitions using the get function.
Animations: Measure
Extract and measure geometry (size and position) of View Transition pseudo-elements using extract.
Animations: Optimize
Optimize ::view-transition-group animations using performant transform-based animations instead of width and height changes.
Playback Control
Control the playback of a View Transition. Use utilities to pause, resume, or scrub all animations simultaneously.
Navigation Types
Automatically inject from-<name> and to-<name> View Transition Types based on navigation origin and destination.
Scroll-Driven
Connect view transitions to scroll animations. Create fluid, progressive scene changes driven by the user's viewport.