View transitions

Transition between server-side rendered pages without using JavaScript

The View Transitions API is available as a first public working draft. The purpose of the API is to allow transitions between the loading of pages of a website – for Single Page Apps (SPA) as well as for Multi Page Apps (MPA). Smooth transitions for loading pages would allow a traditional website to be perceived very much like a native app and would improve how a user perceives the website logic. It´s a great improvement in my view but it is impossible to do it properly today, especially for MPAs. Once fully available, the API would allow transitioning between server-side rendered pages without using any JavaScript.

A first implementation of the API is available in Chrome 104+ behind the feature flag chrome://flags/#document-transition. Maxi Ferreira made an excellent example of its usage: Experiments with Astro and the Shared Element Transition API.

When you jump to Maxi´s Room For Improvement section you find there is still some work to do. So much so, that unfortunately for now I´m not going to invest time into that. But once it´s stable, I think it will quickly turn into a must-have for websites.

There is more material by Jake Archibald with his article Smooth and simple page transitions with the shared element transition API, and the below video:

Bringing page transitions to the web, Jake Archibald on YouTube
Comments