Skip to main content
Donovan LaDuke - Developer

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 #

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!

Buy me a Coffee on Ko-fi