Bag of Tricks for View Transitions
@vtbag.dev
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
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 😆
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.
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.
Bramus@bram.us · 2mo agoOne of the things that we at Chrome have been thinking about is a way to do declarative route and navigation matching **in CSS**. Together with @nomster.bsky.social and @dbaron.org I’ve been working on it for the past few months, and next week we’ll be presenting our work at the CSSWG F2F meeting.
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. 😄
Lionel Péramo@lionel-peramo.com · 3mo ago2. Tips for good performance: - Keep animations short (0.2 to 0.5 seconds). - Only animate simple things like opacity or transform. - Avoid animating large, heavy images. - This keeps your website fast on all devices. 3/4
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...
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.
bram.us
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.
Cyd Stumpel@cydstumpel.nl · 3mo agoI didn't get to all the cool view transition stuff I added to the JS heroes conference demo I made for my talk, so here it is in one blog post! cydstumpel.nl/a-deep-dive-...
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...
Michaël Vanderheyden@th3s4mur41.me · 4mo agoTurns out optimizing for performance can actually harm user experience… Did you know that decoding="async" can break multipage View Transitions? #CSS #HTML #UX #WebDev
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...
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...
pqina.nl
Rik Schennink@rikschennink.com · 4mo agoDialog view transitions with invoker commands. 1. Intercept the "command" and "cancel" events. 2. Run startViewTransition(), in the callback move the view-transition-name from the <button> to <dialog> (and back). 3. Then call `showModal()` or `close()` to toggle the dialog.
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...
Automatically Assigned View Transition Names
Explore current methods for automatically generating view transition names.
vtbag.dev
Bramus@bram.us · 4mo agoNew Blog Post: View Transitions: Should you use the new `attr()` or `match-element` for the `view-transition-name`? Well … It Depends™ www.bram.us/2026/06/19/v...
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.
Cyd Stumpel@cydstumpel.nl · 4mo agoWhen @chriscoyier.net asks you to write an article, you say yes! 🙌 master.dev/blog/demysti...
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.
properties.like
@rotecodefraktion.bsky.social · 4mo agoCross-document view transitions bring app-like page transitions to any classic website, one CSS rule, no JavaScript. www.rotecodefraktion.de/en/blog/css-... #CSS #Frontend #HTML #WebDevelopment
Haven’t read it yet? Pop over and have a look!
Vale@vale.rocks · 4mo agoNot to toot my own trumpet too much, but I think this is an extremely solid resource for understanding view transitions. I've no shame in admitting that I've returned to reference this post when working with view transitions and all the borderline magic you can do with them.
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.
"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."
IntentToShip@intenttoship.dev · 5mo agoBlink: Intent to Ship: CSSPseudoElement support for ::backdrop, ::scroll-marker and ::view-transitions
Part 2 from Durgesh, with detailed insights and plenty of personal experience. css-tricks.com/cross-docume...
Cross-Document View Transitions: Scaling Across Hundreds of Elements | CSS-Tricks
Every view-transition-name on a page must be unique. The problem is that every pseudo-element selector in your CSS targets a specific name, so your animation styles explode into an unmanageable wall o...
css-tricks.com
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. 🫡
CSS-Tricks*@css-tricks.bsky.social · 5mo agoLots of moving parts with cross-doc view transitions, and plenty that can go wrong. I struggle with them for sure but this post has helped a lot. css-tricks.com/cross-docume... And a second part coming next week!
There’s always room for something a (8-)bit more eccentric than the usual cross-fade-and-slide.
Josh@joshsaintjacque.com · 5mo agoHad so much fun making this. The View Transition API is so powerful. #css #js #rails
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...
Link Types Demo - vtbag.dev
The shiny Google Navigation Types Demo from the View Transition Toolkit, but now with @vtbag/turn-signal/link-types
vtbag.dev
Bramus@bram.us · 5mo agoHere's that directional View Transitions demo we talked about over lunch, @twnsnd.com chrome.dev/view-transit... The toolkit automatically injects from-<name> and to-<name> View Transition Types based on navigation origin and destination. The routes are defined in a routemap.
Cool use case for view transitions from @chriscoyier.net
Master.dev (Formerly Frontend Masters)@frontendmasters.com · 5mo agoAnimating Focus with View Transitions Let's try a fresh take on animating focus rings around a page. Flying focus, as it were. Only instead of measuring where elements are ourselves, we'll let View Transitions figure it out.
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
Basics information about the View Transition browser API
vtbag.dev
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 👇
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!
Theo Ephraim@theozero.bsky.social · 6mo agoWant to realize you've been storing your celery wrong your whole life? check out howtostore.food 🥦🥕🍎 Idea has been kicking around in my head for 10+ years, finally made feasible by AI. Still more to do, but very proud of the native view transitions! (built on @astro.build and @cloudflare.social)
