Design plays an important part of our everyday lives. It conveys information that you should be able to intuit without instruction. So, when we say that Google Chrome — say it with us now, one of the best web browsers around — is adding support for some fancy new transitions that are easy to implement, we don't take that lightly around here.

These transitions come as part of the new View Transitions API that's been in the works for 18 months. The feature will be turned on by default with the already-packed Chrome 111 beta.

google-chrome-view-transition-anim
Source: Google

Long story short, this API is touted to beat other existing solutions in implementing transitions between states in a single-page application's Document Object Model. In human speak, think of it as a carousel, but instead of horses, we're talking about the different possible screens of a website. Basically, where you'd otherwise see one horse/screen "jump cut" to another, this API makes it so that you'd actually see the merry-go-round spin between the two.

"Page transitions not only look great," writes developer advocate Jake Archibald, "they also communicate direction of flow, and make it clear which elements are related from page to page."

Archibald goes onto suggest that these transitions can even be used to mask asset loading — mobile app devs know that trick very well, though YouTube's previously done it up to great effect.

Again, the API should be on by default for Chrome 111 beta users — those on the stable channel on Chrome 109 or later can opt to turn on the #view-transition flag. If you're a site developer, there's a full manual on how to work with the new View Transitions API on the Chrome Developers website and a GitHub repo for feedback.