~
In my work with View Transitions over the last several years, I’ve published everything from deep-dive articles, demos, and announcement videos at Google I/O. I’ve also done some more experimental things with it, such as optimizing the keyframes or driving a View Transition by scroll.
To turn the lessons from these scattered experiments into something more reusable for both you and me, I’ve bundled the most frequent code patterns into a dedicated package: view-transitions-toolkit.
~
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-toolkitThen, 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/.
optimize() demoThe source of the demos is included in the repository as well.
~
Go check it out
view-transitions-toolkitdemos (Chrome.dev) →view-transitions-toolkitsource (GitHub) →view-transitions-toolkiton NPM →
~
Spread the word
Feel free to reshare one of the following posts on social media to help spread the word: