Skip to content
Logical Elixirs

Astro View Transitions

View Transitions API is an experimental feature that is being introduced on browsers to allow developers to create smooth transitions between DOM states. The API was proposed and is actively beind developed with intention of providing a simpler, more reliable and easier solution for solving this problem that, historically, required a significant amount of JavaScript and CSS to be written for handling the animation, positioning, user interaction and execution of external code during the transition.

Astro is an early-adopter of multiple technologies and already provides integration with this API for users of the framework to take advantage of. It also provides an abstraction on top of that API that does most of the heavy-lifting and wiring of the API, implements an alternative for browsers that don’t yet supprot it, and exposes both a declarative way of using its features and lifecycle events that are more ergonomic than the lower level API from the browser.

These articles explore Astro’s View Transitions API and the browser feature it builds on. They do not try to cover every part of Astro’s implementation; instead, they focus on the core ideas that make those transitions possible:

  • The browser API starts with a basic image-swap demo to explain what the View Transitions API does and why it helps.
  • DIY ViewTransitions component builds a simplified version of Astro’s <ViewTransitions /> component to show how client-side navigation can be wired around the browser API.

While the focus here is on the details and inner workings of Astro’s View Transitions API, if you want to know more about the API itself and how to use it in your own project, you can check out:

  • The MDN docs for the low-level API itself.
  • The Astro docs for the <ViewTransition /> component, directives and lifecycle events.
  • The Bag of Tricks for Astro’s View Transitions API.

These articles were my first time publishing such deep dives; I normally write them for myself and keep them in my notes. I’m still figuring out the best way to structure and write these to make the content clear and understandable for everyone. If you have any feedback, please let me know!