Sign in

Bag of Tricks for View Transitions

@vtbag.dev
187 followers 1 following 387 posts

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

PostsRepliesMedia
Bag of Tricks for View Transitions @vtbag.dev · 18/09/2026
blog.master.dev/different-pa...
blog.master.dev
Different Page Transitions For Different Circumstances
In JavaScript, you can detect a view transition happening, set a type, and have CSS do unique things based on that type.
000
Bag of Tricks for View Transitions @vtbag.dev · 19/08/2026
More @navigation examples incoming!
010
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
Reposted by Bag of Tricks for View Transitions
Rob @lloveras.info · 09/08/2026
#css master.dev/blog/view-tr...
master.dev
View Transitions: Careful Not To Make Stuff Unclickable
View Transitions block interactivity (like clicks) while they are running. Maybe you don't want to do that.
062
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
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
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 · 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 &lt;dialog&gt; 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 · 12/06/2026
3D view transitions are always fun!
010
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 · 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 · 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
Bag of Tricks for View Transitions @vtbag.dev · 26/05/2026
Part 2 from Durgesh, with detailed insights and plenty of personal experience. css-tricks.com/cross-docume...
css-tricks.com
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...
040
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 · 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
Bag of Tricks for View Transitions @vtbag.dev · 17/05/2026
There’s always room for something a (8-)bit more eccentric than the usual cross-fade-and-slide.
040
Reposted by Bag of Tricks for View Transitions
Martin Trapp @martr.app · 08/05/2026
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...
vtbag.dev
Link Types Demo - vtbag.dev
The shiny Google Navigation Types Demo from the View Transition Toolkit, but now with @vtbag/turn-signal/link-types
021
Bag of Tricks for View Transitions @vtbag.dev · 07/05/2026
Cool use case for view transitions from @chriscoyier.net
010
Bag of Tricks for View Transitions @vtbag.dev · 30/04/2026
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:
vtbag.dev
The View Transition API
Basics information about the View Transition browser API
1136
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
Reposted by Bag of Tricks for View Transitions
matia 🇭🇷 @joyofcode.xyz · 15/04/2026
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
2184
Bag of Tricks for View Transitions @vtbag.dev · 10/04/2026
Really nice use of the View Transition API!
210
Bag of Tricks for View Transitions @vtbag.dev · 04/04/2026
: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...
vtbag.dev
Where to Place CSS for Cross-Document View Transitions?
Your CSS rules are ignored by the View Transition API? Maybe you put them in the wrong place.
010
Reposted by Bag of Tricks for View Transitions
Bramus @bram.us · 02/04/2026
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...
chrome.dev
View Transitions Toolkit
A collection of utility functions to more easily work with View Transitions.
36614
Bag of Tricks for View Transitions @vtbag.dev · 01/04/2026
In light of recent empirical evidence: Place @view-transition { navigation: auto } exclusively within a <style> element in the <head>. Refrain from embedding it within external stylesheets, particularly not trailing vast expanses of CSS. Chrome may otherwise disregard it intermittently.
121
Bag of Tricks for View Transitions @vtbag.dev · 19/03/2026
Cool view transition demo by @paolo.ricciuti.me !
141
Bag of Tricks for View Transitions @vtbag.dev · 13/03/2026
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...
npmjs.com
012
Bag of Tricks for View Transitions @vtbag.dev · 12/03/2026
𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚜𝚌𝚘𝚙𝚎: 𝚊𝚞𝚝𝚘 → 𝚊𝚕𝚕 𝑺𝒂𝒎𝒆 𝒈𝒓𝒆𝒂𝒕 𝒕𝒂𝒔𝒕𝒆, 𝒏𝒆𝒘 𝒏𝒂𝒎𝒆 vtbag.dev/basics/javas...
github.com
Rename view-transition-scope auto -> all. by skobes-chromium · Pull Request #13619 · w3c/csswg-drafts
[css-view-transitions-2] Rename view-transition-scope auto -> all. Fixes #13123.
011
Bag of Tricks for View Transitions @vtbag.dev · 11/03/2026
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():
vtbag.dev
The Utensil Drawer
A growing collection of lightweight utilities to help you craft polished view transitions.
021
Bag of Tricks for View Transitions @vtbag.dev · 07/03/2026
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
vtbag.dev
The Vector Demo
A view transition tech demo were the old and new positions of morphing images control the trajectories.
043
Bag of Tricks for View Transitions @vtbag.dev · 04/03/2026
Surely there’s something we can do. 🙃
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.
030
Reposted by Bag of Tricks for View Transitions
Michael G @g12n.de · 22/02/2026
Playing around with scoped view transitions on @codepen.io codepen.io/g12n/pen/RNR...
codepen.io
Scoped view transitions digits
...
051
Reposted by Bag of Tricks for View Transitions
IntentToShip @intenttoship.dev · 19/02/2026
Blink: Intent to Ship: Element-scoped view transitions
groups.google.com
Blink: Intent to Ship: Element-scoped view transitions
Blink: Intent to Ship: Element-scoped view transitions
1184
Reposted by Bag of Tricks for View Transitions
Bag of Tricks for View Transitions @vtbag.dev · 15/02/2026
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.
111
Reposted by Bag of Tricks for View Transitions
Bag of Tricks for View Transitions @vtbag.dev · 12/02/2026
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.
012
Bag of Tricks for View Transitions @vtbag.dev · 02/02/2026
View Transition API: There is a new kid on the block! 🎉 Meet the new `view-transition-scope` property and discover how it helps you avoid name clashes with scoped view transitions. It gives you a clean way to manage transition names and keeps nested transitions from stepping on each other.
vtbag.dev
View Transition JavaScript API
How to interact with view transitions using JavaScript
140
Bag of Tricks for View Transitions @vtbag.dev · 26/01/2026
Cross-document view transitions for the win! Firefox, come join the fun!
030
Bag of Tricks for View Transitions @vtbag.dev · 22/01/2026
So you came here even though YOU HATE VIEW TRANSITIONS? But no worries, I got you covered. Probably the most compact way to disable view transitions globally: ::view-transition { display: none }. Drop this into your user stylesheet and never be bothered by View Transition API animations again.
310
Reposted by Bag of Tricks for View Transitions
Firefox for Web Developers @webdevs.firefox.com · 19/01/2026
View Transition Types are newly baseline! These make it easier to build transitions that are specific to particular situations. Also, we have some new View Transition DevTools in Firefox 147…
2958
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 · 12/01/2026
Chris and Dave talk about :active-view-transition-type() at 55:33, and it is a lot of fun to hear them brainstorm all the cool things you can do with view transitions.
000
Reposted by Bag of Tricks for View Transitions
Austin Poor @austinpoor.com · 10/01/2026
Adding motion blur to elements during view transitions is such a cool idea youtu.be/UuUAeWpz2NA?...
youtu.be
Designing Page Transitions
YouTube video by React Conf
011