Cross-Document View Transitions for MPAs are here! (2024.06.05 @ CSS Day Pre-Event)

Me, on stage
Me, on stage. Photo by Brecht.

Last week I was in Amsterdam to attend CSS Day. At the pre-event organized by Communication and Multimedia Design Amsterdam I gave a talk on Cross-Document View Transitions for use in your Multi-Page Applications (aka: “just websites”).

~

Table of Contents

~

# The Talk

The talk I gave is a full-length talk of a little over 40 minutes.

In 2023 we at Google shipped Same-Document View Transitions for SPAs in Chrome 111. This year we bring you the next big thing for View Transitions: Cross-Document View Transitions for MPAs, activated by a same-origin navigation. Now you no longer need to rearchitect your app to an SPA in order to use View Transitions: clicking a link from one page to another is enough to trigger the transition.

This was a reprise of the talk I did at JSHeroes with the addition of sections covering View Transition Classes and View Transition Active Types, two new features I announced at Google I/O a few weeks ago.

~

# Slides

The slides of my talk are up on slidr.io are embedded below:

These exported slides don’t contain any recordings of the demos included, but you can follow the link to check them out yourself. For the Same-Document View Transitions demos you will need Chrome 111+. For the Cross-Document View Transitions demos you need Chrome 126+.

~

# Recording/Video

This talk was not recorded. You can check out a recording from the rendition at JSHeroes.

~

# Thanks!

Thanks to Vasilis, Sanne and Krijn for inviting me to speak at this pre-event and kick off a wonderful three days packed with CSS. It was very delightful to see a lot of you, and it was very inspiring to have Sanne show some of the students their work before the event started. I sure envy those students for having such great lecturers and getting taught The Right Thing™ from the start.

~

💁‍♂️ If you are a conference or meetup organiser, don't hesitate to contact me to come speak at your event.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.