Thank you, happy if i can be helpful!
The 👜 Bag of Tricks ✨ for View Transitions | https://vtbag.dev The 👜 Bag of Tricks ✨ for Astro's Client Router | https://events-3bg.pages.dev Tools, Info, Tips & Tricks Enhance Your Development Skills with the View Transition API
97 followers 1 following 187 posts
view profile on Bluesky
Thank you, happy if i can be helpful!
We all are craving ;-)
Sorry if I have to dampen the good mood a bit, but the View Transition API has two levels, and the cited Level 2 is not part of Interop 2025.
Yep, L1 is a good start. There are ways to extend that into cross-document view transitions, e.g. with Astro. Safari quickly followed up with L2. @firefox.com might prioritize other goals like the remaining interop 2025 features. But they know the whole community is craving MPA view transitions!
The wording may cause a bit of confusion. Officially it is called "CSS View Transitions". But Level 1 (as in Firefox now) only works with document.startViewTransition(). The JS-free @view-transition rule belongs to Level 2, which is not in Interop 2025. With luck, the wait will not be too long.
Gecko: Intent to Ship: CSS View Transitions L1
What surprising experiences have you had with view transitions? Let’s keep the list going so others can benefit from your experiences and get some help along the way!
We have all had those moments when things just do not work, or at least not the way we expected. Do not let that get you down or scare you off. It should not feel this way, because view transitions are supposed to be always fun. I tucked a survival kit into the bag to keep frustration at bay!
Thanks @bram.us for requesting this!
New in Chrome Canary: You can now access a currently active view transition from JavaScript without the need to monkey-patch document.startViewTransition(): Say hello to document.activeViewTransition [Does not yet work on arbitrary elements when used with scoped view transitions]
And just like that, another feature graduates from Canary. We love to see it. 🎓
Now is the time to point your regular Chrome browser (>=139) at vtbag.dev/basics/test-...
In particular, the ability to split the UI into multiple independent view transitions will significantly enhance interactivity of view transitions. Looking forward to new demos!
Hi Penny 👋, thanks for the good news! Clipping with scoped view transitions works like a charm, now even in regular Chrome!
Step by step. Looking forward to view transitions!
That really made my day! I'm in that video! Forget five seconds of fame. I got six! From the creators of ‘Over the Top Animations’ comes pure, unfiltered glory. The page falls, the crowd gasps — see it at 0:49.
Just combed through the CSSWG drafts for the View Transition API again to check for recent changes and upcoming ideas. I jotted down what I found here:
Crafting same-document view transitions with those fancy view transition types? And dreaming of the day Firefox finally joins the party with Level 1 support? Good news, this’ll have you covered.
Anything I can try to help with?
A huge heartfelt thank-you! I’m really glad if it’s been helpful! 🙌🏻
Hi Duffeh! With CSS, looks like there are often multiple roads to Rome 😎
No worries, I was not trying to stab you! Just sharing some thoughts and what I have learned. 🤺👜✨😆
“Native CSS transitions have quietly killed the strongest argument for client-side routing. Yet people keep building terrible apps instead of performant websites.” - @jono.id www.jonoalderson.com/conjecture/i...
Yes, that is what people often say. But “minimally functional” can still turn into “mildly maddening” if you do not realize you might need to help the browser out with a few extra directives to handle render blocking on larger pages.
View transitions are always fun!
A lively, insightful article with great examples. One shows well how easily group animations can cross existing subtree boundaries in the DOM, while another features staggered animation.
Hi Christian, toller Blog Post, das macht echt Spaß zu lesen!
Good job @firefoxnightly.bsky.social! Really looking forward to view transitions in Firefox. For all curious about the test page: vtbag.dev/basics/test-page/
Just spotted: Firefox Nightly already supports view-transition-class from the Level 2 spec.
... And here we go! Welcome to Episode 7 of Fun With View Transitions! (link in the header of the demo) Enjoy your weekend with this super playful and aha‑filled, delightfully nerdy romp through a demo packed with tools, tips and tricks. Happy if you get some ideas and inspiration out of it!
Haha, awesome how the animation really pops and jumps out at you!
This really jumps out at you!
I would like to watch the video, but unfortunately I am getting a "video not found" error message!?
Yes, it’s a good 80% solution, and the remaining 20% won’t realize, because the navigation appears as usual to them.
No doubt that’s the correct order, regardless of what the other stuff is.
3/3 Not nearly as great as scoped view transitions, but scoping stuff with a view transition type keeps everything neatly grouped together and it makes it easier to keep different use cases from getting in each other's way. Just add the types you need to the view transition, and you are good to go.
2/3 e.g.: .active-view-transition-type(board-spin) { #board { view-transition-name: board } #board button { background: grey } &::view-transition-old(board) {animation-name: spin-out} &::view-transition-new(board) {animation-name: spin-in} } @keyframes spin-out {..} @keyframes spin-in {..}
1/3 Love this pattern for conceptional independent view transitions running on the same page: .active-view-transition-type(some-type) { /* set view transition names and classes */ /* style stuff disabled by view transitions as disabled */ /* style pseudo-elements */ } /* define @keyframes */
Pretty sure we are going to see same-document view transitions land in Firefox soon! Exciting times ahead! 👜✨
While we are waiting, why not have a little fun with the latest Firefox Nightly (142)? Most of the demos here already run pretty OK. Worth a spin!
It might be a good approach to limit view transitions when there’s a preference for reduced motion. Some frameworks do this in their view transition integration. However, the API itself does not. If that catches you by surprise, it’s often hard to notice as there’s no clear feedback in that case.
Cool page!
Explore entertaining ways to toggle between dark and light themes using view transitions! ☀️🌙
Cool stuff! View transitions are always fun! events-3bg.pages.dev/jotter/same-...
… or clip the new one. And of course, you can also use z-index to switch the order of the old and new pseudo-element within their view-transition-group.
Lots of tips, tricks and examples at vtbag.dev ;-)
By default, the image of the new page is painted above the old one and covers it completely. So if it has a solid background, you have to shift it in or fade it in, otherwise you will only see the new image and nothing of the old page.
@keyframes out { … } @keyframes in { … }
Yes, by default you get two pseudo-elements: ::view-transition-old(root) and ::view-transition-new(root). You can override their crossfade animation e.g. with css like this: ::view-transition-old(root){ animation-name: out; } ::view-transition-new(root){ animation-name: in; }
Just keep in mind that the @view-transition rule might not be the only thing to add. You might also want to account for reduced motion and plan for a bit of render blocking where needed.
This is definitely a strong suggestion! It has a much simpler mental model than a client-side router. Cross-document view transitions simply animate navigation without the hassle of re-initializing JavaScript state after the transition.
One page. Clean HTML. Smart CSS. Just enough JavaScript. Right-click and choose View Source to see how it works.
Psst, the slides of my @middlesbroughfe.co.uk talk are up on my blog! > This talk explores the wild side of View Transitions. We’ll combine them with Scroll-Driven Animations, trigger them automatically with MutationObserver, and even resurrect classic Internet Explorer’s Page Transitions. #MFE25
The test page has been updated accordingly! Go give it a spin! 🧪✨
You love the View Transition API and you know its pseudo-elements by heart: ::view-transition ::view-transition-group ::view-transition-image-pair ::view-transition-old ::view-transition-new But have you already heard of ::view-transition-group-children? Find further information on vtbag.dev
View Transitions are always fun!
You can work around it, but yes, +1!
Or did you mean normal CSS transitions retriggering for no reason?
Explicitly setting the view transition name of :root to none during the same-document view transition prevents this. The same issue can occur with two same-document view transitions on the same page if their view transition names are not properly scoped to their respective view transitions.
document.startViewTransition() and auto navigation with @view-transition both start view transitions on the entire document For e.g. if you define a slide animation on :root for cross-document view transitions it will also play when you start a same-document view transition for opening the dialog.
events-3bg.pages.dev/jotter/same-...
I like this incantation. :active-view-transition-type(lightbox) { *:not(dialog.lightbox *), & { view-transition-name: none !important; } } to temporarily switch off all other view transition names that might interfere with the lightbox.
Yeah, mutual isolation of view transitions is a really interesting and sometimes challenging topic. Everything will fall into place once we have scoped view transitions, but until then, you have to handle it yourself. And that applies to the plain View Transition API too, not just Astro.
Hey @duffeh.bsky.social 👋 Good article! Cool effect! Switching to the native API (even for cross-document view transitions) is the right way to go in 2025!
New for AstroJS View Transitions: Use instead of 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...
Haha, I get what you mean. But at least JavaScript lets you stick with your single view-transition-name approach for both forward and backward navigation. Are you using @view-transition with plain HTML or a framework?
Hi @ikbensiep.lfo-industries.com 👋 Guarding view transition names with selectors like you did is mostly a clever approach. Are you looking for a JavaScript-free solution, or would you also consider JS-based approaches?
Definitively! Same document view transition is part of Interop 2025 and Firefox Nightly already allows for a sneak preview. Safari was quick at the end of last year to add cross-document support after same-document view transitions. Would be great if Firefox could also add them soon after.
About a year ago, @fks.bsky.social wrote: "We will be updating our documentation over the next few weeks to include using these new native browser APIs." Now that also Firefox is actively working on the View Transition API, maybe it is time to finally add that information to the Astro docs?
Also: The Astro.js ClientRouter was meant as a stopgap to enable cross-document transitions before native browser support was ready. Now widely supported by the View Transition API, you might consider switching to it to avoid the state and script issues that come from turning your MPA into a SPA.
Glad you found a solution! There are actually a few more elements that survive the Astro.js swap(): events-3bg.pages.dev/jotter/astro...
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!
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.
I’ve been exploring View Transitions a bit. So if you ever get stuck or curious, happy to share what I know.
Feeling honored: Bramus picked up an idea we chatted about, extended his blog, and even linked back to The Bag! That is one heck of a compliment coming from someone whose talks and demos around view transitions (and far beyond!) I truly admire. Huge thanks, @bram.us, that really made my day!
Bramus offers an amazing look behind the scenes of Maxi's famous demo! I cannot match that fantastic 3D effect, but if you want to see the individual pseudo-elements of your view transitions just as clearly, I have something for you. See that "Frame elements" checkbox in the controls on the right?
What Jim observed (cross-document view transitions work well when the page comes from back-forward cache but break on normal load) is a classical sign that you might want to take a closer look at (insufficient) render blocking.
Firefox is rightly not included in the list, as it currently does not support cross-document view transitions. Same-document view transitions are actively being developed (part of Interop 2025), and their current state can already be explored in Firefox Nightly.
This is Firefox Nightly 140.0a1 (2025-05-21)
View Transition API (lvl 1) is enabled in Firefox Nightly bsky.app/profile/mart...
Hi @foldster.bsky.social 👋 No, currently not. Cross-document view transitions only work when navigating between pages of same origin. See drafts.csswg.org/css-view-tra... (searching the spec for “same-origin” will yield some more matches)
That ripples effect at the end is really cool! ⚪🔘
🎉👜✨Tada! Just like I said!: vtbag.dev/vector-demo/ View transitions that crank up the drama the farther the element travels from its old spot to the new one.
Yes, match-element works in both, but that falls short for cross-document transitions when names should match. I like that your ident() examples look cleaner than attr() with the explicitly type() cast. I share some notes on my current experiments here: vtbag.dev/tips/auto-na...
Whoohoo! There will be a CSS-native way to auto-assign view transition names (and more). I have coded auto-naming results of querySelectorAll so many times that I even published a reusable function for it: vtbag.dev/tools/utensi... Glad to see this will finally be possible with the standard.
Will soon post the demo where these lines were taken from!
Here you can try it live! Every click triggers a view transition. If you click quickly, the latest one would rudely interrupt the active one. mayStartViewTransition() from @vtbag/utensil-drawer helps here by queuing update callbacks and batching them into new view transitions.
⏱️ 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 🖱️💥
Don’t just stick to the highlighted bit – the whole piece is a fun and rewarding read! View transitions are always fun!
Oh yes, that really looks very similar! Thanks a lot!
Thank you! Guess it is not so much about right and wrong. The browsers are in the wild and sites have to deal with all of them, at least for some month. Gecko in Firefox nightly seems similar to WebKit with respect to viewport resizing but has other glitches :-)
A brand new episode from the Fun With View Transition series
It was so strange. Only on mobile, when opening a particular blog post, featuring some fancy component, the View Transition API stubbornly refused to start the animation. “This is so mysterious, it promises to be a lot of fun.” At that point, I did not yet know just how much fun was waiting for me.
🌫️🌫️ It has begun.🌫️🌫️ 🌫️🌫️ It is coming. 🌫️🌫️
"snapshot containing block" sounds complicate. Simply think "viewport - including dynamic browser menus on mobile". And yes, changing the orientation of a mobile is also a trigger.
Hi @ianbellomy.com Progress report on drag and drop view transitions! So far I’ve only tested this in Chromium, but I’m quite happy with the current state. Let me know if this aligns with what you had in mind. codepen.io/martrapp/pen...
Worth keeping in mind while developing: View transitions cancel if the snapshot containing block changes size mid-flight, for example, when you resize the devtools while you paused the animations. Surprising? Maybe. But it is expected behavior, even if it feels a bit unexpected. 🤓