@vtbag

@vtbag is a comprehensive suite of tools, tips, and tricks to make your experience with the View Transition API smoother and more efficient.

You’re getting an early view at the site in its infancy, starting with the first tool in the suite: the Inspection Chamber, which now got company in form of the Element-Crossing.

More tools are in the pipeline, and I’m eager to hear your feedback and learn what would be most valuable to you.

If you’re new to view transitions, be sure to check out the view transition examples on this site to get started.

Technology

@vtbag is all about the View Transition API. Find out more about this browser API↗.

The content part of this site is build with Starlight + View Transitions↗. Thanks to Astro’s view transition simulation, you can experience some of the effects on the content pages even with browsers that do not yet offer native support for the View Transition API.

The tech demos on this site are independent of Astro. They only use the View Transition API and require browsers with native support for it. Cross document effects need a level 2 compliant browser↗. The Inspection Chamber also requires support for view transitions inside iframes, which might require you to manually set the chrome://flags/#view-transition-on-navigation-iframe flag.

Relation to astro-vtbot

Some of you might be familiar with astro-vtbot↗, the big sister, or at least the spiritual predecessor, of @vtbag: Even when the same-document (level 1) View Transition API in Chrome was only accessible behind flags, the Astro project had already anticipated parts of the level 2 specification, enabling cross-document view transitions for MPAs. Of course, Astro’s client-side router isn’t technically comparable to level 2 view transitions and has its own challenges in handling scripts and state, but it allowed many users to experiment early and build expertise in view transitions.

Astro-vtbot, as a community project, built on that foundation by offering technical demos, reusable components, and a wealth of tips and tricks for using view transitions in Astro projects.

Another Bag of Tricks

With the wider adoption of the view transition API and the introduction of level 2, cross-document transitions can now be defined purely with CSS, without the need for an additional client-side router. @vtbag is your go-to resource for framework-agnostic support around view transitions.

@vtbag inherits the concept of a Bag of Tricks from astro-vtbot: a diverse collection of tricks, tips, components, and tools. While astro-vtbot continues to focus on the specific needs of the Astro router, @vtbag aims at the view transition API in general, without being tied to any specific framework.

Both astro-vtbot and @vtbag might be referred to as “The Bag” as typically the context makes it clear which one is meant.