On a final glance at my ranking, I couldn’t help but notice it’s definitely leaning a bit in one direction.

A lot has happened since Chrome shipped Same-Document View Transitions in 2023. In 2024 we shipped Cross-Document VTs, added refinements such as `view-transition-class` and VT Types, and also welcomed Safari in adding VT support. And this year … well, I wrote a post summing it all up.

Did you know that the View Transition API not only copies border properties from the named element to the ::view-transition-group-children pseudo-element, it also animates them? It's so new, it's not even spec'd yet. So might be subject to change. As always, you can find the details in The Bag.

Quick heads-up for anyone trying this and running into trouble: Scoped view transitions (currently only supported in Chrome nightly behind the 'Experimental Web Platform features' flag) do work inside a shadow DOM for the most part, except for the tiny detail that they do not produce any animations.

This may not be obvious: setting the view-transition-name CSS property on an element creates a backdrop root, establishes a stacking context, and flattens its children in 3D space, see the reply from @zubiden.bsky.social for a pointer to the spec.

Stay informed and decide wisely.

See Bramus' information about nested view transition groups and this little demo on how to utilize ::view-transition-group-children to let the list items slide behind the border and even behind the scrollbar!

Two phase cross-document means you start an animation into a preview, then continue to the final page once enough of its content is ready. That is, if I got it right, @nomster.bsky.social.

And for y’all using Astro’s client router: this means that you will be the first showing cross-document view transitions in Firefox even before those get native support! As soon as a browser has minimal view transition support, the client router will use that instead of the fallback simulation.

Thank you for sharing, @fry69.dev!

Safari Technology Preview 227 supports Navigation API and document.activeViewTransition now gives access to (shuffles notes) … the active view transition (if there is an active one)

Hi @kevinpowell.co 👋, yes, "normal" view transitions are document global. All groups defined in the DOM will run when the view transition starts. That gives you two options: a) use scoped view transitions b) guard your view transition names and switch those off, you want to suppress.

It makes me really proud to see famous visitors exploring The Bag ;-)

Gecko: Intent to Ship: CSS View Transitions L1

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!

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

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.

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

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.

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!

This really jumps out at you!

No doubt that’s the correct order, regardless of what the other stuff is.

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! 👜✨

Explore entertaining ways to toggle between dark and light themes using view transitions! ☀️🌙

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

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

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!

New for AstroJS View Transitions: Use <A href="..."> instead of <a href="..."> 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...

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.

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?

🎉👜✨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.

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!

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

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

This is beyond slick! HT @jhey.dev