View Transitions API

Native apps have had many features out of the box that web developers could only dream of for a long time now. However, the web environment has been changing and adapting fast these last few years, and one recent change (only available in Chrome and Edge right now) will finally allow us to do some beautiful page transitions. I am, of course, talking about the View Transition API. This API allows developers to create beautiful and seamless page transitions that were previously only possible with native apps. It's exciting to see how the web is evolving and becoming more like a first-class app citizen.

What is the View Transition API?

The API offers a way to animate between pages, it currently only works with SPAs but will allow transitions to all same origin pages in time. Out of the box the animation is a simple cross fade but using CSS or JavaScript you can write more complex and interesting animations. These include elements moving to occupy new spaces or content entering/leaving a screen with a transform, as in my demo.

The API is called with JS (for SPAs) and uses the startViewTransition function.

How does the View Transitions API work?

The View Transition API allows developers to create beautiful and seamless page transitions that were previously only possible with native apps. The transition effect is achieved by taking a snapshot of the site in its current state and another snapshot of the incoming page and then allowing animations between them. Simple fades and whole page transitions (like in your example) are fairly straightforward, but more complex looks can be achieved by breaking the snapshot up into named layers and animating those separately. You can check out this [demo site by Jake Archibald] to get an idea of what's possible.

Source: Conversation with Bing, 5/15/2023(1) Smooth and simple transitions with the View Transitions API. https://developer.chrome.com/docs/web-platform/view-transitions/ Accessed 5/15/2023.

(2) SPA view transitions land in Chrome 111 - Chrome Developers. https://developer.chrome.com/blog/spa-view-transitions-land/ Accessed 5/15/2023.

(3) Jake Archibald - Chrome Developers. https://developer.chrome.com/authors/jakearchibald/ Accessed 5/15/2023.

Can I use the Transition API in my Project?

Absolutely! But...

At time of writing the API only works in chromium and even there it's only partial (SPA only) support. For now I would say experiment and get ready for the feature to land and even use it in projects where you control the environment, like electron.

You can of course check if the API is supported and if not use a fallback but I'm not really a fan of doing JavaScript checks for legacy browsers.

// Check to see if API is supported
if (document.startViewTransition) {
  // start transition
  const transition = document.startViewTransition(() => navigate(url));

  // when transition start run animation
  transition.ready.then(() => {
    document.documentElement.animate(
      // logic for animation
    );
  });
} else {
  // fallback for old browser
  navigate(url);
}

When full page to page support lands in at least one browser it will be a much easier sell, a little bit of CSS that is ignored by legacy browsers, but until then...

Fin

I think you’re saying that as we get closer to the web feeling like a first-class app citizen, little changes like this will go a long way to making PWAs and sites feel native and fluid. Is that correct?