Bag of Tricks for View Transitions

Hi friends! Just moved to our new home at vtbag.dev! Follow The Bag to catch the next cool tricks we’ll pull out!

Built an entirely reasonable dark mode toggle for ChaTodo: pull the cord, the bulb swings, the lighting changes, and View Transition handles the rest. Was all that necessary? Of claws. I’m no kitten when it comes to design. 😼 Pull it yourself: chatodo.app #DarkMode #WebDesign #Cat

Auf der #unkonf in Mannheim bin ich noch als Lückenfüller eingesprungen und habe 20 Minuten über view-transitions gesprochen. Das wäre die längere Version gewesen: grochtdreis.de/talks/unkonf... #unkonf26 #css #viewtransitions

Remember Internet Explorer’s “Page Transitions”? Well, they’re back, thanks to the View Transition API! → Blog post: brm.us/page-transit... → Demo site: page-transitions.style The project leverages IE’s meta tags so browser support is not limited to Modern Browsers™ but also includes IE 5.5–8.0 😆

blog.master.dev/different-pa...

More @navigation examples incoming!

#css master.dev/blog/view-tr...

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.

Very cool stuff off the beaten path!

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. 😄

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...

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.

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...

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...

3D view transitions are always fun!

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.

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 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.

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

"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."

Part 2 from Durgesh, with detailed insights and plenty of personal experience. css-tricks.com/cross-docume...

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 🫶

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. 🫡

There’s always room for something a (8-)bit more eccentric than the usual cross-fade-and-slide.

As an alternative to mapping routes and matching paths, you can define the view transition type directly where it happens: on the link. I adapted the Chrome DevRel demo to use @vtbag/turn-signal/link-types 👨‍🔧 Same result, just a different way of thinking about it. vtbag.dev/navigation-t...

Cool use case for view transitions from @chriscoyier.net

The View Transition API is getting more forgiving: in future, duplicate view transition names will no longer cancel your animation. The API will sweep them aside, give you a nudge in the console, and carry on with the uniquely named elements. Catch all the recent changes on The Bag’s API page:

The View Transition API makes page transitions easy but requires more thought for DOM morphing Aspect ratio changes are tricky and you have to think what elements to separate so it looks right

Really nice use of the View Transition API!

:active-view-transition-type() is a lifesaver when you want to isolate different view transition use cases on the same page. Here is how: vtbag.dev/tips/css/#sc...

So, I’ve written a bunch of things on how to do certain things with View Transitions, such as optimizing the keyframes or driving a VT by scroll. I noticed I repeat a lot of code throughout those experiments … so I bundled that all up in a package for you. 👉 chrome.dev/view-transit...

Cool view transition demo by @paolo.ricciuti.me !

Astro v6 just landed, and you can view transition of astro-vtbot from Astro v5 to v6 as a smooth move, simply by letting a version update slide into place. The new astro vtbot v2.1.12 is ready and works with both Astro v5 and v6. 🚀 www.npmjs.com/package/astr...

𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚜𝚌𝚘𝚙𝚎: 𝚊𝚞𝚝𝚘 → 𝚊𝚕𝚕 𝑺𝒂𝒎𝒆 𝒈𝒓𝒆𝒂𝒕 𝒕𝒂𝒔𝒕𝒆, 𝒏𝒆𝒘 𝒏𝒂𝒎𝒆 vtbag.dev/basics/javas...

Think same document view transitions are supported everywhere? Think again. Some older browser versions only support the Level 1 API, or not even that. Bramus's library lets you code against the Level 2 API regardless of native support,... ...much like the Bag's mayStartViewTransition():

If you like Adam's article, you might also want to have a look at vtbag.dev/vector-demo/ and fun-with-view-transitions.pages.dev/episode/7/page

Surely there’s something we can do. 🙃

Playing around with scoped view transitions on @codepen.io codepen.io/g12n/pen/RNR...

Blink: Intent to Ship: Element-scoped view transitions

If you want, you can delay the start of cross-document view transitions by blocking the renderer until the custom elements are defined. Then the last frame you see is the previous page. After the renderer resumes, the next frame shows the loading page with defined custom elements.

I am genuinely confident that Firefox will soon support cross document view transitions. That will make an enormous difference to overall compatibility. Then it will also soon be possible to detect forward and backward directions without the History or Navigation API.