𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚜𝚌𝚘𝚙𝚎: 𝚊𝚞𝚝𝚘 → 𝚊𝚕𝚕 𝑺𝒂𝒎𝒆 𝒈𝒓𝒆𝒂𝒕 𝒕𝒂𝒔𝒕𝒆, 𝒏𝒆𝒘 𝒏𝒂𝒎𝒆 vtbag.dev/basics/javas...

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():

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

Surely there’s something we can do. 🙃

Playing around with scoped view transitions on @codepen.io codepen.io/g12n/pen/RNR...

Blink: Intent to Ship: Element-scoped view transitions

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.

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.

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.

Cross-document view transitions for the win! Firefox, come join the fun!

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.

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…

ICYMI: Firefox now shows the tree of pseudo-elements in devtools during view transitions:

View transition types landed in Firefox 147. See it for yourself at vtbag.dev/basics/test-... BUT DO NOT FORGET ... (continued below)

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.

Adding motion blur to elements during view transitions is such a cool idea youtu.be/UuUAeWpz2NA?...

Psst, the CSS code snippets contain errors. The values for `view-transition-name` should be idents, not (quoted) strings 😉

Redesigning my website I really enjoyed dipping my toes into CSS view transitions. Here's how I added some snazzy animations to my static website! giacomocavalieri.me/writing/effo...

Hi Ben 👋 Atmospheric and wonderfully smooth. This is a really nice way to open modal dialogs and it feels calm and intentional rather than too flashy. View transitions are always fun, especially when they add clarity and flow instead of just motion. Thanks for this example!

¡Brutal forma de cambiar a modo oscuro tu web! Usa una animación con View Transitions. Son 2 líneas de JavaScript y un poco de CSS: → theme-toggle.rdsx.dev

Smooth view transitions for dialogs. Thomas Günther shows how to combine <dialog> and View Transition API for smooth, accessible animations using startViewTransition(), showModal(), and close(). Works in all major browsers, apart from closedby missing from Safari. medienbaecker.com/articles/dia...

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.

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!