Navigation API is on its way to become baseline. bsky.app/profile/vtba...

Best part: Miguel’s article comes with a checklist to avoid common pitfalls!

Navigation API is part of Interop 2025. This will greatly simplify view transitions!

Another API proposal from TPAC: CSS routes and navigation queries, meaning less JavaScript is needed for view transitions! https://drafts.csswg.org/css-navigation-1/ https://github.com/w3c/csswg-drafts/issues/8685#issue-1653949919

Ah, that was fast. Who can spot the difference?

The gaps are closing!

Perfect! Thank you, Emilio, for looking into this! This will not only enable Firefox to support the more modern startViewTransition signature with the options object, but also simplify support for different view transition use cases, as seen here: vtbag.dev/tips/css/#sc...

Now part of Baseline, the view-transition-class property simplifies styling → goo.gle/42KlzLc With this new addition you can: ✔️ Apply styles to multiple elements ✔️ Keep your CSS cleaner ✔️ Streamline complex animations

Really nice CodePen @highflyer910.bsky.social ! 👋 I might add z-index: 1 to ::view-transition-group(nav) and leave it off page-header and hero, but that is just a personal preference 🙂

Speaking of ⏪turn signals⏩: This thing can make your view transition setup a lot simpler when it comes to controlling the direction of cross-document view transitions. vtbag.dev/tools/turn-s...

View transitions are pretty neat, and I was fortunate enough to write a piece for @piccalil.li about putting them to work. They're such an exciting new part of the web platform, and I'm elated to see new and boundary-pushing effects making their way into production. #WebDev #ViewTransitions #CSS

#Development #Guides View Transition API · Ways to create smooth, instant page transitions ilo.im/16844p by Brad Woods _____ #ModernCSS #ViewTransitions #Animations #WebPages #API #Browser #WebDev #Frontend #CSS #JavaScript

Browser support for view transitions is rocketing and there's not many better out there to help you understand how to implement them than Cyd Stumpel. piccalil.li/blog/start-i...

We're currently working on devtools for view transitions in Firefox, but in the meantime, here's a little-known option that helps…

How on earth did that happen?! 😱🙈 Scoped view transitions officially made it into the spec and I managed to miss it for three whole weeks? Unbelievable! - Element.prototype.startViewTransition() - new transitionRoot property + view transition name isolation with contain: view-transition

Ever wanted to keep a view transition going until some other activity finishes? You could add an artificial animation to a pseudo-element and remove it when your activity ends. Or you can now use the brand-new waitUntil() function on the view transition object to pass a promise to wait for!

When you scroll down on vtbag.dev, you can find a few view transition demos at the bottom of the navigation sidebar that work perfectly even in Firefox v144. Now guess which ones?

Yes, once you get used to Level 2 of the View Transition API, you might miss a few things. But @firefox.com did a great job by adding some Level 2 features: match-element for auto-generated view transition names, the view-transition-class CSS property, and the :active-view-transition pseudo-class.

As of today, every major browser supports Level 1 of the View Transition API! To celebrate, here is a short video freshly captured in Firefox 144.

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! ☀️🌙