Multi-page application View Transitions are here

Summary

Bramus, a Chrome Developer Relations Engineer at Google, introduces new advancements in web app transitions, particularly focusing on view transitions for both Single Page Applications (SPA) and Multi-Page Applications (MPA). Building on the previous year's launch, Chrome now supports seamless, cross-document view transitions on the same origin, allowing developers to enhance user experiences across multiple pages. The presentation highlights new features like view transition classes, types, and events such as pageswap and pagereveal, all aimed at improving customization and performance. Bramus emphasizes that these improvements offer greater control over transitions without requiring major re-architecture.

Takeaways

• 😀 View transitions in Chrome enable smooth, native-like transitions between views in web apps, providing a seamless user experience.
• 😀 Same document view transitions, introduced in Chrome 111, allow transitions within Single Page Applications (SPA) using a simple JavaScript API (`document.startViewTransition`).
• 😀 Cross-document view transitions, coming in 2024, allow seamless transitions between multiple pages in Multi-Page Applications (MPA) without requiring SPA architecture.
• 😀 Cross-document transitions only work on the same origin (same scheme, hostname, and port), and do not support cross-origin navigation.
• 😀 The transition process involves capturing snapshots of elements with a unique view transition name, updating the DOM, and animating transitions with CSS.
• 😀 To trigger cross-document view transitions, developers no longer need to use an API; it happens automatically during same-origin navigation (e.g., clicking a link).
• 😀 Developers can opt into cross-document view transitions via CSS using the `@view-transition` rule, with a navigation descriptor set to 'auto'.
• 😀 Two new events (`pageswap` and `pagereveal`) help developers customize transitions based on the source and destination pages, giving more control over the transition process.
• 😀 To optimize transition performance, developers can use `blocking-render` meta tags to delay page rendering until certain elements are ready, though this can affect Core Web Vitals (LCP, CLS).
• 😀 Pre-rendering via the Speculation Rules API can help improve perceived load times and create near-instant transitions between pages by preloading content as users hover over links.
• 😀 Upcoming features for view transitions include scope transitions for subtree DOM transitions, navigation matching in CSS for more customization, and gesture-driven transitions (swipe/drag) for a native-like navigation experience.

Q & A

What is the main focus of this video?

The main focus of the video is to introduce and explain the new cross-document view transitions feature in Chrome, which enhances the user experience by allowing seamless transitions between pages in Multi-Page Applications (MPAs). It also highlights improvements and refinements to existing view transition functionality.

What are same document view transitions, and how do they work?

Same document view transitions are used within Single Page Applications (SPAs) to create smooth transitions between different views on the same page. They work by taking snapshots of elements with a specified view transition name, animating these elements from their old position to a new one using CSS animations.

What are cross-document view transitions, and how do they differ from same document view transitions?

Cross-document view transitions enable smooth transitions between two pages in a Multi-Page Application (MPA) on the same origin. Unlike same document transitions, which are triggered by JavaScript (document.startViewTransition), cross-document transitions are triggered automatically by same-origin navigation, such as when a user clicks a link.

What is the significance of the 'same origin' requirement for cross-document view transitions?

The 'same origin' requirement ensures that the pages involved in the transition are from the same website, meaning they share the same scheme, hostname, and port. This is necessary for security reasons and to guarantee a smooth transition without issues arising from cross-origin navigation.

How do developers opt in to enable cross-document view transitions?

Developers opt in to cross-document view transitions by using a new CSS rule, '@view-transition', with a navigation descriptor set to 'auto'. This allows transitions between pages on the same origin to be automatically triggered upon navigation.

What are the pageswap and pagereveal events, and how are they used in cross-document view transitions?

The pageswap and pagereveal events allow developers to customize transitions between pages. The pageswap event fires just before the old page renders its last frame, allowing changes to be made based on the URLs of the pages. The pagereveal event fires on the new page as it begins rendering, providing the opportunity to adjust the page's presentation before the first frame is displayed.

What is the purpose of the 'blocking render' meta tag, and how can it affect Core Web Vitals?

The 'blocking render' meta tag allows developers to delay the first render of a page until specific elements are present in the DOM. This can prevent layout shifts and improve the stability of the page, but it might impact Core Web Vitals, particularly Largest Contentful Paint (LCP) by delaying when the new content is shown.

How can pre-rendering help improve the performance of cross-document view transitions?

Pre-rendering can improve performance by loading the next page while the user is still on the current one, reducing perceived load times. By using the Speculation Rules API, developers can pre-load pages based on user interactions, such as hovering over a link, to make the transition between pages feel instant.

What are the benefits of using view transition classes, and how do they simplify animation management?

View transition classes allow developers to group elements that share the same animation behavior, making it easier to manage transitions. Instead of applying animation styles to each individual element, developers can define a class for all elements that participate in the transition, reducing redundancy and simplifying code.

What are view transition types, and how do they improve customization of transitions?

View transition types allow developers to apply different animations to various elements based on the specific context of the transition. For example, different animations can be used for pagination or reordering items. These types are automatically cleaned up after the transition ends, making it easier to manage multiple animations on the same page.