For this year’s Google I/O, I recorded the session “Multi-page application View Transitions are here”.
Last year, we debuted Same-Document View Transitions for use in your Single-Page Applications (SPAs), and now we’re taking it to the next level. Get ready for enhanced control over View Transitions to more easily create immersive user experiences. We are also giving you Cross-Document View Transitions which allow you to create seamless navigations in your Multi-Page Applications (MPAs).
In the talk, I cover two main topics:
- Cross-Document View Transitions for Multi-Page Applications
- View Transitions Improvements (
view-transition-classand View Transition Types)
You can find the video embedded at the top of this post. If you’re more into reading, check out the announcement blog post. The documentation up on developer.chrome.com also got an overhaul.
Watch “Multi-page application View Transitions are here” on YouTube →
Read the announcement blog post →
Read the updated documentation (SPA + MPA) →
We / I need a really simple example so I can learn this and know exactly what is happening…. I have a slide in and out affect for incoming page and navigating back, but wanting to learn the new MPA way to achieve this and it’s driving me nuts.
I added types to the viewTransition object but do I still need view-transiton-name?
Yes, you still need a `view-transition-name` on each participating element for it to be captured in the snapshotting process.
The Pagination demo on https://view-transitions.netlify.app/ – which is also covered in the video and the docs – should get you started to achieve the effect you want.