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.

Bramus@bram.us · 6d ago

One of the things that we at Chrome have been thinking about is a way to do declarative route and navigation matching **in CSS**. Together with @nomster.bsky.social and @dbaron.org I’ve been working on it for the past few months, and next week we’ll be presenting our work at the CSSWG F2F meeting.

Very cool stuff off the beaten path!

Zerde@zerdebek.bsky.social · 2w ago

What I made for this week's @codepen.io challenge: view transitions. It was a perfect opportunity to turn my old Figma design into code :D 🖊️ codepen.io/editor/zerde...

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

Lionel Péramo@lionel-peramo.com · 2w ago

2. Tips for good performance: - Keep animations short (0.2 to 0.5 seconds). - Only animate simple things like opacity or transform. - Avoid animating large, heavy images. - This keeps your website fast on all devices. 3/4

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

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.

bram.us

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.

Cyd Stumpel@cydstumpel.nl · 4w ago

I didn't get to all the cool view transition stuff I added to the JS heroes conference demo I made for my talk, so here it is in one blog post! cydstumpel.nl/a-deep-dive-...

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

Michaël Vanderheyden@th3s4mur41.me · last mo.

Turns out optimizing for performance can actually harm user experience… Did you know that decoding="async" can break multipage View Transitions? #CSS #HTML #UX #WebDev

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

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

pqina.nl

Rik Schennink@rikschennink.com · last mo.

Dialog view transitions with invoker commands. 1. Intercept the "command" and "cancel" events. 2. Run startViewTransition(), in the callback move the view-transition-name from the <button> to <dialog> (and back). 3. Then call `showModal()` or `close()` to toggle the dialog.

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

Automatically Assigned View Transition Names

Explore current methods for automatically generating view transition names.

vtbag.dev

Bramus@bram.us · 2mo ago

New Blog Post: View Transitions: Should you use the new `attr()` or `match-element` for the `view-transition-name`? Well … It Depends™ www.bram.us/2026/06/19/v...

3D view transitions are always fun!

CSS-Tricks*@css-tricks.com · 2mo ago

What you want here is not: .parent { perspective: 600px; } …but: .child { transform: perspective(600px); } css-tricks.com/why-isnt-my-...

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.

Cyd Stumpel@cydstumpel.nl · 2mo ago

When @chriscoyier.net asks you to write an article, you say yes! 🙌 master.dev/blog/demysti...

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

@rotecodefraktion.bsky.social · 2mo ago

Cross-document view transitions bring app-like page transitions to any classic website, one CSS rule, no JavaScript. www.rotecodefraktion.de/en/blog/css-... #CSS #Frontend #HTML #WebDevelopment

Haven’t read it yet? Pop over and have a look!

Vale@vale.rocks · 2mo ago

Not to toot my own trumpet too much, but I think this is an extremely solid resource for understanding view transitions. I've no shame in admitting that I've returned to reference this post when working with view transitions and all the borderline magic you can do with them.

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.

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

IntentToShip@intenttoship.dev · 2mo ago

Blink: Intent to Ship: CSSPseudoElement support for ::backdrop, ::scroll-marker and ::view-transitions

Part 2 from Durgesh, with detailed insights and plenty of personal experience. css-tricks.com/cross-docume...

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

css-tricks.com

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 🫶

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

CSS-Tricks*@css-tricks.com · 3mo ago

Lots of moving parts with cross-doc view transitions, and plenty that can go wrong. I struggle with them for sure but this post has helped a lot. css-tricks.com/cross-docume... And a second part coming next week!

There’s always room for something a (8-)bit more eccentric than the usual cross-fade-and-slide.

Josh@joshsaintjacque.com · 3mo ago

Had so much fun making this. The View Transition API is so powerful. #css #js #rails

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

Link Types Demo - vtbag.dev

The shiny Google Navigation Types Demo from the View Transition Toolkit, but now with @vtbag/turn-signal/link-types

vtbag.dev

Bramus@bram.us · 3mo ago

Here's that directional View Transitions demo we talked about over lunch, @twnsnd.com chrome.dev/view-transit... The toolkit automatically injects from-<name> and to-<name> View Transition Types based on navigation origin and destination. The routes are defined in a routemap.

Cool use case for view transitions from @chriscoyier.net

Master.dev (Formerly Frontend Masters)@frontendmasters.com · 3mo ago

Animating Focus with View Transitions Let's try a fresh take on animating focus rings around a page. Flying focus, as it were. Only instead of measuring where elements are ourselves, we'll let View Transitions figure it out.

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:

The View Transition API

Basics information about the View Transition browser API

vtbag.dev

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 👇

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

Really nice use of the View Transition API!

Theo Ephraim@theozero.bsky.social · 4mo ago

Want to realize you've been storing your celery wrong your whole life? check out howtostore.food 🥦🥕🍎 Idea has been kicking around in my head for 10+ years, finally made feasible by AI. Still more to do, but very proud of the native view transitions! (built on @astro.build and @cloudflare.social)

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

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.

vtbag.dev

Chrome for Developers@developer.chrome.com · 4mo ago

The :active-view-transition and :active-view-transition-type() pseudo-classes are now Baseline Newly available → goo.gle/4qtrKgu Use these to apply specific style rules while transitions are in flight.

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

View Transitions Toolkit

A collection of utility functions to more easily work with View Transitions.

chrome.dev

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.

Cool view transition demo by @paolo.ricciuti.me !

{🧪} +paoloricciuti.svelte@paolo.ricciuti.me · 5mo ago

Modern CSS is just so awesome...all of this with view transitions! svelte.dev/playground/e...

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