iiinova — where your digital self keeps evolving

Bag of Tricks for View Transitions @vtbag.dev · 13/08/2026

In Chrome Canary behind the Experimental Web Platform features flag: Directional back/forward cross-document view transitions when you travers the history backwards or forwards. CSS only solution, no JS required.

/* enable cross-document view transitions */
@view-transition {
navigation: auto;
}

/* set the default animation for the view transition */
::view-transition-old(root) {
animation-name: slideOutToLeft;
}
::view-transition-new(root) {
animation-name: slideInFromRight;
}

/* on backward history traversal, reverse the animation */
@navigation (history: back) {
::view-transition-old(root) {
animation-name: slideOutToRight;
}
::view-transition-new(root) {
animation-name: slideInFromLeft;
}
}

@keyframes slideOutToRight {
to {
opacity: 0;
transform: translateX(100%);
}
}
@keyframes slideInFromLeft {
from {
opacity: 0;
transform: translateX(-100%);
}
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(100%);
}
}
@keyframes slideOutToLeft {
to {
opacity: 0;
transform: translateX(-100%);
}
}

190

Bag of Tricks for View Transitions @vtbag.dev · 16/06/2026

Yes, that is a very compelling argument. The preview below is from an upcoming, completely redesigned version of the Bag's Inspection Chamber, resizing an iframe with a nailed down viewport to prevent the view transitions from being interrupted while the dimension change.

110

Bag of Tricks for View Transitions @vtbag.dev · 10/06/2026

I'm not yet sure whether we will be able to fill the Mechanical Curator of View Transition Matters position, but the interviews with Vitras have been going quite well so far.

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!

000

Bag of Tricks for View Transitions @vtbag.dev · 23/04/2026

Love those classic thumbnail detail zooms with shared images in cross document view transitions? Want the same trick when switching state on the same page? Just give the thumbnail and the large image the same view-transition-name 😲 🚨🚨 !Non-unique view transition name panic! 🚨🚨 👇 See next post 👇

100

Bag of Tricks for View Transitions @vtbag.dev · 19/04/2026

For broader browser compatibility, you might find this pattern helpful:

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

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

140

Bag of Tricks for View Transitions @vtbag.dev · 14/01/2026

ICYMI: Firefox now shows the tree of pseudo-elements in devtools during view transitions:

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

0100

Bag of Tricks for View Transitions @vtbag.dev · 13/01/2026

View transition types landed in Firefox 147. See it for yourself at vtbag.dev/basics/test-... BUT DO NOT FORGET ... (continued below)

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

100

Bag of Tricks for View Transitions @vtbag.dev · 28/11/2025

Ah, that was fast. Who can spot the difference?

010

Bag of Tricks for View Transitions @vtbag.dev · 14/10/2025

As of today, every major browser supports Level 1 of the View Transition API! To celebrate, here is a short video freshly captured in Firefox 144.

1162

Bag of Tricks for View Transitions @vtbag.dev · 10/10/2025

On a final glance at my ranking, I couldn’t help but notice it’s definitely leaning a bit in one direction.

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

060

Bag of Tricks for View Transitions @vtbag.dev · 14/07/2025

Just spotted: Firefox Nightly already supports view-transition-class from the Level 2 spec.

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.

181

Bag of Tricks for View Transitions @vtbag.dev · 10/06/2025

New for AstroJS View Transitions: Use <A href="..."> instead of <a href="..."> to make that link show the backwards animation when clicked and the forward animation on browser back! Demo: events-3bg.pages.dev/back-demo/ Description: events-3bg.pages.dev/library/Back...

010

Bag of Tricks for View Transitions @vtbag.dev · 31/05/2025

I guess, an URL would have been nice. Here it is: events-3bg.pages.dev/jotter/same-... Can’t believe I missed that in the first post. I'm really sorry about that! Making up for it the only way I know how: with a fresh teaser drop from that article!

000

Bag of Tricks for View Transitions @vtbag.dev · 31/05/2025

The Jotter has a new page about how to do same-document view transitions in Astro. Works fine in combination with cross-document view transitions and even with multiple use cases on the same page. Spoiler alarm: Most of it is not Astro-specific at all.

111

Bag of Tricks for View Transitions @vtbag.dev · 21/05/2025

This is Firefox Nightly 140.0a1 (2025-05-21)

110

Bag of Tricks for View Transitions @vtbag.dev · 12/05/2025

⏱️ Time for another teaser! 🔗 Chained View Transitions Where starting a new transition won’t cancel the one already in progress, no matter how fast you slam that button 🖱️💥

000

Bag of Tricks for View Transitions @vtbag.dev · 19/03/2025

No new post in a week? Well then, it is high time for a mysterious teaser!

110

Bag of Tricks for View Transitions @vtbag.dev · 04/03/2025

Sites with cross-document view transitions often respect the users' reduced motion preferences. Luckily, you can just set 'prefer reduced motion' in your browser without messing with your whole OS and the native apps where you actually like transitions.

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

010

Bag of Tricks for View Transitions @vtbag.dev · 13/02/2025

1/2 I want to share a remake of a tech demo I built last May using the <ViewTransitions/> component of astro.js. This time it is pure JavaScript: codepen.io/martrapp/pen...

120

Bag of Tricks for View Transitions @vtbag.dev · 25/01/2025

Exited to announce the launch of a brand-new series of bite-sized posts on vtbag.dev. vtbag.dev/fwvt/welcome/ Kicking off as a triple feature! The first episodes dive into enhancing a multi-page website with browser-native cross-document view transitions.

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

120

Bag of Tricks for View Transitions @vtbag.dev · 10/01/2025

Are you thinking about a transition (pun intended) from Astro's <ViewTransitions /> component to browser-native cross-document view transitions with the @view-transition at-rule of the View Transition API? Here is your migration path: events-3bg.pages.dev/jotter/migra...

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/

341