Bag of Tricks for View Transitions

@vtbag.dev

182 Followers 1 Following

The 👜 Bag of Tricks ✨ for View Transitions | https://vtbag.dev The 👜 Bag of Tricks ✨ for Astro's View Transitions | https://events-3bg.pages.dev Tools, Info, Tips & Tricks Enhance Your Development Skills with the View Transition API

Preview of an upcoming, completely redisigned version of the Bag's Inspection Chamber, resizing an iframe with a nailed down viewport to prevent the view transitions from being interrupted.

A screenshot of an initial test with Vitras, a prospective Mechanical Curator at vtbag.dev:

(Vitras ponders your words…)

How can I help you with the View Transition API or the tools available in @vtbag?

You can help by engaging with the View Transition API and providing feedback on the tools available at @vtbag. I am keen to learn what you find valuable and where you encounter issues.

If you are looking to experiment, you can use the following tools:

Inspection Chamber: An in-browser devtool for interactively testing your transitions.
Element Crossing: For moving state, such as video playback position, across cross-document transitions.
Turn Signal: For setting transition types to differentiate between forward and backward navigation.
Cam-Shaft: To adjust transition images and prevent unexpected scrolling effects.
Utensil Drawer: A collection of utilities, including mayStartViewTransition(), which handles browser support checks, reduced motion preferences, and transition queuing.
If you encounter broken features or have questions about implementation, please ping The Bag on Bluesky.

(Vitras scribbles in their journal…)

...view transitions are always fun!

A tech demo showing a thumbnail of a map morphing into an extended view and back again.

<button style="--vtn: container">
<span style="--vtn: text">Text</span>
</button>

<style>
[style*="--vtn:"] {
view-transition-name: var(--vtn);
}
</style>

Screenshot of devtool in Firefox showing the tree of view transition pseudo elements

Current Firefox support more and more features of the View Transition API. The latest addition are view transition types and the :active-view-transition-type() pseudo-class

The Bag of Tricks for View Transitions has an RSS feed: vtbag.dev/rss.xml

A video showing view transitions Firefox v144

My ranking for interop 2026:
- Cross-document CSS view transitions
- HTML <link type=„expect“>
- Speculation Rules API
- Improve interoperability of the View Transition API
- View transition types
- Improve interoperability of the Navigation API

A test page that shows which features of the View Transition API your browser supports, here showing Firefox Nightly (142).
It supports not only same-document view transitions but also the view-transition-class property that is specified in the Level 2 specification.

Thene switcher view transitions with 3d effect

A tech demo showing a page with a left and a right navigation links.
Pressing the button navigates to the next page which has the same navigation links.
On navigation, the old page slides out to the left, the new page slides in from the right.

This demo shows that the left link directly shows the backward animation, sliding the pages out to the right and in from the left.

A tech demo showing an animation for a dark mode / light mode switch, where the old view tumbles out while the new one smoothes in.

In your browser, press crtl-shift-i, ctrl-shift-p followed by 'reduce' to select reduced motion.

A tech demo of an image gallery with swirling images.

Hello, and welcome to "Fun with View Transitions!"

A flow chart showing the steps on how to migrate from Astro's <ViewTransitions> component to browser-native cross-document view transitions. All info given in the image is also available in full-text at https://events-3bg.pages.dev/jotter/migrate/