The View Transitions API

Like anyone, I love a good “native-feeling” experience on the web. I’ve really enjoyed creating that vibe with the new View Transitions API. Luckily it’s is pretty clean to work with, both with the Astro framework, and out of the box!

Transitioning UI between states has been something that developers have been doing for ages, and yes, you can use things like the Web Animation API as well as CSS transitions and animations for that. But, handling transitions when elements are removed from the page, or you navigate away from a given page, is much harder, particularly when you’re thinking about assistive tech, scroll position, and focus… it’s gnarly.

Untiiiiil now! The View Transitions API has been evolving in the browser both as a proper W3C Candidate Recommendation, and as of this week, the draft for cross-document navigation is in a public working draft!

What does that mean? It means you can have that “native” animation experience, right in the browser! But more specifically, currently you can use the View Transitions API:

Leave a Comment