Multi-page application View Transitions are here

[@ChromeDevs]

Check out all the web sessions at Google I/O → goo.gle/io24-web-yt

[@ciberman]

This means the comeback of MPA!!

[@bramus]

Were they ever gone? ;)

[@x-dr6uh]

Are view transitions interruptible? Excited for gesture driven transitions

[@bramus]

Right now, when a View Transition gets interrupted it skips to the end. Regargetable View Transitions is something we are still thinking about.

[@Slava-om1sz]

This is a blessing from tech heavens!

[@rogerpence]

Wow. What a great video. Thank you.

[@aarontgove101]

Nice work Bramus! 👏👏👏

[@MachineYearning]

Game. Changing. 😢😢😢

[@mrbjjackson]

Are these APIs web standards? I.e. if I build view transitions for Chrome will they work in Safari when they add the feature? I ask because I've already built a site using the tag view transition implementation and now it looks like this is going to be replaced by CSS directives. Ideally I don't want to have to change my code until this is all settled. Any idea when a consensus will be reached?

[@KhushalSagar]

The API which has shipped in Chrome was standardized at CSSWG with feedback from Apple/Mozilla. Definitely will not be changing. :)

[@bramus]

The thing with the meta tag you implemented back in the day was part of a prototype which was only available behind an experimental feature flag in Chrome. It lead up to what is now shipping in Chrome, which is part of the View Transitions Level 2 CSSWG web standard. To change your experimental implementation to the standardized one, swap out the meta tag by the at-rule to opt-in. All the rest stays the same. View Transitions are the perfect candidate for Progressive Enhancement: once other browser vendors also implement Cross-Document View Transitions, they too will start showing the transitions. Until then, users get the experience without View Transitions.

[@mrbjjackson]

​@@KhushalSagar Thanks for the reply. I don't know if you are an expert on View Transitions but in case you are - please can you explain something to me: if the view-transition is now triggered by a CSS rule, does this mean that now, all the linked CSS files are preloaded before the new page is displayed, rather than streamed in? I suppose I should expect this because if they aren't loaded, the transition won't know where to transition elements to... Can you clarify please? Or point me in the direction of somewhere this is explained. Thanks :)

[@mrbjjackson]

@@bramus Thanks for the reply. I wondered if you could please can you please clarify something to me: if the view-transition is now triggered by a CSS rule, does this mean that now, all the linked CSS files are preloaded before the new page is displayed, rather than streamed in? I suppose I should expect this because if they aren't loaded, the transition won't know where to transition elements to... Can you clarify please? Or point me in the direction of somewhere this is explained. Thanks :)

[@aktxyz]

any idea if this works in webviews for mobile apps? I had to actually enable via config in desktop chrome

[@obetomuniz]

Was fixed to use View Transitions? Trying View Transitions with an embedded KZbin video playing was not smooth, it refreshed the whole on the target screen.

[@KhushalSagar]

Do you mind filing a crbug? It doesn't sound like you were trying to do a transition within the . More like using the as a named element.

[@KhushalSagar]

Just a quick update in case this was your issue, View Transitions now work as expected if there is a same-origin navigation in an .

[@drewb9162]

Does this work with different CSS files for each page? Ik the other version of this API didn't work with different CSS which was a deal breaker for me.

[@KhushalSagar]

Yes, you can have different CSS files on each page. I'm not sure what you mean by "the other version of this API didn't work with different CSS". Could you clarify?

[@svivian]

Have the performance issues been fixed? Only a few weeks ago they were still really sluggish.

[@bramus]

What issues specifically are you running into? Got a repro to share?

[@mohammednasser2159]

Astro Mentioned

[@ilirbeqiri253]

Please update the Angular logo ;)

[@karlgustav9960]

Cross document view transitions? IE6 “Hold my beer…” funny how back then everybody hated it 😂

[@saadmehmood1535]

Others: Multi-page application view transitions are really cool Me: How this dinosaur going to make this jump ... ?

[@saqqara6361]

flutter support for this?

[@laudijksterhuis]

How is flutter relevant for this function?

[@obetomuniz]

@@forno_nicolas Actually, Flutter can benefits from this, since people can have MPAs that contains different canvas ctx on each. I have tried something like this, and it worked pretty well.

[@AivoPaas]

Sorry, but those hands transitions are overpowering the content.