Introducing view-transitions-toolkit, a collection of utility functions to more easily work with View Transitions.

~

~

The view-transitions-toolkit

view-transitions-toolkit is a collection of small, focused helper functions for use with View Transitions. They fill in some of the gaps to making advanced patterns much easier to implement.

• Feature Detection: Get information about whether certain View Transitions sub-features 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.

The goal of the project is to provide these utilities so you don’t have to reinvent the wheel every time you want to do something slightly advanced with View Transitions.

~

Getting Started

Using the toolkit is incredibly simple. First, install it from npm:

npm i view-transitions-toolkit

Then, you can import the modules you need and use their functions. Optimizing the keyframes of a View Transition group for example is a simple one-liner:

import { optimizeGroupAnimations, OPTIMIZATION_STRATEGY } from "view-transitions-toolkit/animations";

const t = document.startViewTransition(() => { … });
await t.ready;

// Optimize all Group Animations using the default SCALE strategy
optimizeGroupAnimations(t, "*");

// Optimize only the `::view-transition-group(box-flip)` animation using the SLIDE strategy
optimizeGroupAnimations(t, "box-flip", OPTIMIZATION_STRATEGY.SLIDE);

I won’t go into details here, as all features are documented in the docs folder of the repo.

~

Demos

The project also comes with a public website that not only gives you the basic info, but also comes with a bunch of demos: https://chrome.dev/view-transitions-toolkit/.

The source of the demos is included in the repository as well.

~

Go check it out

• view-transitions-toolkit demos (Chrome.dev) →
• view-transitions-toolkit source (GitHub) →
• view-transitions-toolkit on NPM →

~

Spread the word

Feel free to reshare one of the following posts on social media to help spread the word:

• 🦋 Bluesky
• 🦣 Mastodon
• 💼 LinkedIn