View Transitions API

For a long time now native apps have had many features out of the box that us web developers could only dream of, from better hardware integration to beautiful and seamless page transitions. The web environment, however, 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.

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 transition effect is achieved by taking a snapshot, a sort of image, 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 my example) are fairly straightforward but more complex looks can be achieved by breaking the snapshot up into named layers and animating those separately. I suggest having a look at this demo site by Jake Archibald to get an idea of what's possible.

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

Thanks for reading and exploring new web standards with me. As we get closer and 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.

Thanks so much for reading. If you'd like to connect with me outside of Dev here are my twitter and linkedin come say hi 😊.