DEV Community

Cover image for View Transitions API
Andrew Bone
Andrew Bone

Posted on

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(() => {
      // logic for animation
} else {
  // fallback for old browser
Enter fullscreen mode Exit fullscreen mode

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...


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 😊.

Top comments (6)

kurtextrem profile image
Jacob "kurtextrem" Groß

I can recommend checking out this tweet for more cool animations:

The spec explainer even mentions a meta tag you can use to enable MPA transitions.

ant_f_dev profile image
Anthony Fung

Hi Andrew. Thanks for sharing this.

This certainly looks like it could make page transitions cooler with minimal code - let's hope other browsers adopt it too!

_eduard26 profile image
Eduard Constantin

not that hard to use, but I'll wait for this API to become public.

link2twenty profile image
Andrew Bone

It'll be even more powerful when some libraries are made that handle all the complexities and allow for interesting effects will minimal effort.

link2twenty profile image
Andrew Bone

Feel free to say hi in the comments and ask any questions, this post was really just a simple 'look at this cool thing' post but I think they're good sometimes.

Some comments have been hidden by the post's author - find out more