iiinova — where your digital self keeps evolving

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

Cross-document view transitions are part of Interop26 and Firefox is the only one that has a todo.

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

> Have you run into this View Transitions trap before? Yes, it can be a bit of a surprise the first time you run into it and you see that your page is inactive by default until the view transition animations have finished 😅

vtbag.dev

Retain Control While Transitioning

Normally, you cannot interact with a page while view transition animations are running. Here is why that happens, and how to fix it.

111

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

Oops, typo. Of course the at-rule is called “@navigation”

000

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

It might take a while until @navigate becomes baseline. In the meanwhile, you can use the turn-signal scripts to get forward/backward view transition types for history traversals automatically. And much more, like setting types per link or getting directions based on the order of your pages.

vtbag.dev

The Turn-Signal

@vtbag/turn-signal simplifies directional view transitions for intuitive history traversal navigation.

110

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 · 12/08/2026

As @meijer.ws suggested, backward animations when going up the sidebar feel really natural. One can automatically derive “forward”/“backward” view transition types from the nav bar HTML. The Direction Script makes this easy, though I suspect your 11ty site generator already knows the page order. 😃

vtbag.dev

The Turn-Signal

@vtbag/turn-signal simplifies directional view transitions for intuitive history traversal navigation.

010

Bag of Tricks for View Transitions @vtbag.dev · 31/07/2026

This is huge for MPAs. Once these features are Baseline, they’ll make a hell of a difference. The initial proposal is open for feedback, so don’t miss your chance to influence where it goes next.

021

Bag of Tricks for View Transitions @vtbag.dev · 24/07/2026

Very cool stuff off the beaten path!

000

Bag of Tricks for View Transitions @vtbag.dev · 20/07/2026

Nothing commercial. I mostly build tech demos and publish general tips and tricks for the View Transition API on vtbag.dev. I also have a dedicated site about view transitions with the Astro Client Router at events-3bg.pages.dev.

vtbag.dev

The Bag of Tricks for View Transitions

Tools, Tips, and Tricks to Enhance your Dev Skills with the View Transition API!

010

Bag of Tricks for View Transitions @vtbag.dev · 20/07/2026

Great insights on making View Transitions enhance, rather than overshadow, your UI. I cannot help feeling this was written with people like me in mind. 😄

111

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

The CSS only variant of View Transitions is currently available in all major browsers except Firefox. The Firefox team is working on support as part of Interop 2026.

000

Reposted by Bag of Tricks for View Transitions

Alastair Coote @alastair.is · 14/07/2026

agh, stumbled into an issue I didn't realise before now: web view transitions aren't hardware accelerated if the size of the element changes. Great writeup by @bram.us here: www.bram.us/2025/02/07/v...

bram.us

View Transitions Applied: More performant ::view-transition-group(*) animations

If the dimensions of the ::view-transition-group(*) don’t change between the old and new snapshot you can optimize its keyframes so that it animates on the compositor.

111

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

An engaging behind-the-scenes look at how it all came together. Seeing the design decisions, experiments, and the little problems that needed solving is what makes these write-ups so valuable. Lots of first-hand insights and practical tips in here.

040

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

It's not the pseudo-tree that needs a parent with a perspective. Rather, it's the old and new images that need a direct parent, and that parent is the image-pair pseudo-element, which exists in every group: ::view-transition-image-pair(root) { perspective: 50cm; } This will also do the trick.

000

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

Yes, better have the next page ready before someone clicks the link ;-)

000

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

Ah, thanks for the explanation. That makes sense! My own experience with custom elements is mostly light DOM components, so I have rather cowardly sidestepped all the Shadow DOM problems.

010

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

> I'm still very much a vt noob We are all ;-) You might be able to give the ::after a view transition name, too. Assigning view transition names to pseudo-elements typically works, at least for ::before, ::after, ::backdrop, ...

110

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

...before resuming the animations, with a complete new image. But that blocks the UI for several more frames. And you added "async" precisely to avoid blocking, did you not? If possible, it is better to preload the image before starting the view transition.

010

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

It is even more dynamic: the ::view-transition-new pseudo is not a screenshot but displays the image _while_ it is loading. You could avoid a broken appearance by pausing the view transition animations right at the start, while only the old image is visible, and waiting for the new image to load...

110

Reposted by Bag of Tricks for View Transitions

Rik Schennink @rikschennink.com · 23/06/2026

I wrote a small article explaining how to animate the <dialog> element using the View Transition API. The article also goes into Invoker Commands API and it concludes with some handy tips and tricks that improve the default behaviour of the <dialog> modal. pqina.nl/blog/animati...

pqina.nl

Animating The Dialog Element Using View Transitions

In this article we look at animating the <dialog> element using the View Transition API. We’ll follow progressive enhancement so it’s only used when supported and when the user allows animations...

26510

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

Bramus has a new post on when match-element is the right tool for the job, and, just as important, when it isn’t! Looking for a wider view? Visit vtbag.dev for a discussion and comparison of alternative approaches. vtbag.dev/tips/auto-na...

vtbag.dev

Automatically Assigned View Transition Names

Explore current methods for automatically generating view transition names.

040

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 · 15/06/2026

A notable strength is the ability to recognize that not every problem is a nail and to select the most effective tool accordingly ;-)

140

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

I am looking forward to it too, but it is still a little early to start celebrating. Waiting for cross-document view transitions in Firefox! And I suspect that if that happens, I will just find myself waiting for nested view transition groups and element scoped view transitions (Firefox & Safari)

110

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

Yeah, both approaches work well. It’s always reassuring when there isn’t just one “right” answer, but a few good options to choose from depending on the situation.

010

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

...but you can also just set perspective on the parent as usual. The only thing to remember is that, when animating view transition pseudos, the direct parent of both the old and new images is the image-pair pseudo element: ::view-transition-image-pair(root) { perspective: 50cm; }

vtbag.dev

Playing Tower of Hanoi

Fun With View Transitions, Episode 7: Tips, tricks, and fresh ideas to spark your own view transition magic!

210

Reposted by Bag of Tricks for View Transitions

Chris Coyier @chriscoyier.net · 10/06/2026

This was so helpful to me. Cyd is the VT GOAT. I now get that `::view-transition-group` is what you target to fiddle with the *size and movement* during the transition. And the -old and -new ones are the individual elements and what you need to deal with for funky aspect ratios and whatnot.

0152

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 · 10/06/2026

There’s every chance we’ll see this in Firefox within the next six months too. ;-)

000

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

A very good intro that avoids the usual pitfalls. What I especially like is that David understands, and conveys, how CSS property inheritance works with the pseudo-elements: animation-duration lives on the group, while animation-name is not set via the shorthand, which would reset other properties.

properties.like

100

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

Haven’t read it yet? Pop over and have a look!

010

Reposted by Bag of Tricks for View Transitions

Leif Niemczik @leifs.website · 27/05/2026

hey @developer.chrome.com is there any way to disable the baked in navigation transtitions on android? It's the same for native cross-document view-transitions, the transition will play after the swipe, which directly conflicts with the APIs use case.

231

Bag of Tricks for View Transitions @vtbag.dev · 28/05/2026

As developers, we adore our own transitions, but browser vendors are equally fond of theirs. hasUAVisualTransition on PopStateEvent and NavigateEvent lets SPAs detect system gestures to suppress their own animations (not the other way). MPAs are out of luck: proper page loads fire no such events.

110

Bag of Tricks for View Transitions @vtbag.dev · 26/05/2026

"enables geometry-aware view transitions.It also allows you to intercept a view transition mid-flight to start a new one, utilizing the coordinates of the currently animating element to avoid sudden visual jumps."

000

Reposted by Bag of Tricks for View Transitions

Louis Chenais @lucho.cool · 22/05/2026

Do you have examples of view-transitions found in the wild? I'm looking for examples to share to designers I work with. Thanks in advance 🫶

794

Bag of Tricks for View Transitions @vtbag.dev · 22/05/2026

I assume you have already checked out the demos on vtbag.dev. Some of them are pretty wild, though not exactly in the wild 🤓

vtbag.dev

The Bag of Tricks for View Transitions

Tools, Tips, and Tricks to Enhance your Dev Skills with the View Transition API!

000

Bag of Tricks for View Transitions @vtbag.dev · 22/05/2026

Good choice with view-transitions though. I fully approve of that selection! 😁

000

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

Definitely not a must have, at any rate. Have you managed to figure out what might be causing it? If you like, I can have a look as well. Schöne Grüße nach Lörrach!

000

Bag of Tricks for View Transitions @vtbag.dev · 18/05/2026

Haha, repeatedly spelling out in a CSS-Tricks article, complete with code examples, which outdated syntax no longer works is definitely going to get baked into the brains of every LLM out there. 🫡

020