Cross-Document View Transitions

Websites with full page reloads can often result in users perceiving a website as slow. This, amongst many other reasons, has driven developers to choose Single Page Application (SPA) frameworks like React, Vue, and Angular. This can be a great choice for many web apps, but other sites would benefit from choosing a traditional multi-page approach. For example this blog is built using 11ty a JS based static site generator which means each page will show a loading transition between loads. Now however with Cross-Document View Transitions, as shown off at Google I/O this year, the perception of quick, integrated, page loading is possible with multi-page sites.

Adding Multi-Page Application Navigation Transitions #

To add support to a website, add the following snippet CSS block to your CSS file to turn navigation transitions on. Just by adding this block, the website will now perform a subtle fade between screens.

@view-transition {
  navigation: auto;
}

Note, a preview version of the API required adding a view-transition meta tag to your head block, this is no longer required and is instead replaced with the above CSS solution.

Adding Multi-Page Application Element Transitions #

If there are shared elements that should animate between pages to show continuity, this can be accomplished with the view-transition-name CSS property. By applying view-transition-name to the elements the browser will identify the element as being shared and generate the transition animation. The view-transition-name needs to be applied to elements on both screens in order for the animation to work, otherwise it will be ignored.

<!-- Page 1 -->
<a href="/page2" style="view-transition-name: page-2-title">Page 2 Title</a>

<!-- Page 2 -->
<h1 style="view-transition-name: page-2-title">Page 2 Title</h1>

Now when a user navigates between "Page 1" and "Page 2" in the above example, the page-2-title element will animate by moving and resizing to show continuity. This animation works both forward and backwards, so there is no additional work required to support the user pressing the back or forward button.

Browser Support #

As of writing this article this feature is only available in Chrome and Microsoft Edge. However, there is no current plans for support in FireFox or Safari so users of those browsers will retain the existing experience. See this MDN article for more details and up to date support.

Quick Notes #

• Progressive Enhancement - This feature is a great example of progressive enhancement, giving users of old or non-supporting browsers the existing experience, while giving users of more modern browsers an upgraded experience.
• Unique Ids - The view-transition-name variables must be unique per page or the animations will fail to play. This means if there are multiple links in a list/detail view, every element will need a uniquely generated id.
• Custom Animations - If the default animation is not what is desired, the animations for entering and exiting can be overridden with the ::view-transition-new and ::view-transition-old pseudo-element selectors.
• Accessibility Motion Support - If the animation played results in a lot of motion, strongly consider using the prefers-reduced-motion media query to disable the animations.
• Ensuring Elements Exist - If the other page will take a moment to load before rendering, consider adding a blocking render link like this <link rel="expect" blocking="render" href="#my-id"> to ensure the animation plays smoothly.
• Cross-Document, Same-Domain - While the elements exist on different pages, they must exist in the same domain. So transitions between www.example.com and www.example.com/page2 will work but not www.example.com and page2.example.com.

Conclusion #

Want to see this in action? If you navigated to this article from somewhere else on this site and are using Chrome, then the animation probably already played. When navigating between pages, the pages softly fade between one another and the post header information animates seamlessly between lists and posts. Feel free to navigate around to experience the animation and consider adding support for this new enhancement to give users an even better experience while traversing the web. Until next time, thanks!

Did you find this content helpful?

Please share this post and be sure to subscribe to the RSS feed to be notified of all future articles!

Want to go above and beyond? Help me out by sending me $1 on Ko-fi. It goes a long way in helping run this site and keeping it advertisement free. Thank you in advance!

• Previous: Improving Perceived Performance with Delayed Visibility
• Next: How to Add an aiexclude File