@vtbag: Overview

@vtbag is a comprehensive suite of tools, tips, and tricks to make your experience with the View Transition API smoother and more efficient. Check how well your current browser supports the view transition API.

Tools

The site already got some interesting tools to offer:

The Inspection Chamber, a in-browser devtool that allows you to interactively put your view transitions through their paces.

The Element-Crossing, which allows you to move state like video playback position across browser-native cross-document view transitions.

The TurnSignal, which sets view transition types so your CCS rules can style backward animations different than forward animations.

The CamShaft, which bumps your view transition images into place to avoid unexpected pseudo-smooth-scroll effects.

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

Basics

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

CSS Tips & Tricks

The third block contains practical tips and tricks for styling view transitions.

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↗. The view transitions featured on this site and tech demos 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↗.

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 a flag, 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.