Skip to content
Bag of Tricks

Last updated: First published:

The Jotter

Besides The Bag’s focused on tech demos and reusable components it also had a docs section about Astro’s life-cycle events and Tips & Tricks on view transitions right from the start. What is new is that these bits and pieces are now going Starlight! This in itself is some big tech demo ;-)

The Jotter is a collection of odds and ends I gathered when I was putting together the 👜 Bag of Tricks ✨ for Astro’s view transitions. A lot of the fragments are currently in the Lost & Found section. I hope to improve this over time.

The Jotter is a living document. I’ll try my best to keep you posted on the history of changes so that you can check from time to time and see what’s new.

So this is all about view transitions: A kind of animation in the browser, where views blend into each other.

Setting up the Scene: View Transitions

If a website consists of several pages, you often get annoying effects when the next page is loaded. You will typically see short flashes, half-loaded pages and jumping elements. The main advantage of view transitions is that they replace these loading artifacts with a smooth visual transition. While transitions between pages is the main use case for view transitions, it is worth noting that at their core, they are used to transition between different versions of the same document.

At the time of writing, the world is split in two: Chromium-based browsers (Chrome, Edge, Opera, …) have native support for view transitions, all others do not. Safari added support for level 1 view transitions with the Technology Preview 192. Check out the capabilities of your current browser on the test page!

In the Astro framework, you can use native view transitions on browsers that natively support them, and you get an emulation of the main effects on browsers that don’t support them.

In this Jotter, you’ll find lots of tips on how to use the view transitions built into Astro. But you may also get a deep insight into the View Transition API independently of Astro. If you want to learn more about the View Transition API beyond Astro, please visit astro-vtbot’s framework independent sister vtbag.dev↗.

So how can you gain initial experience with view transition?

Automatically on Each Navigation

Automatic view transitions between all pages of a multi page application are available on most modern browsers now. You can activate the View Transition API with a simple CSS at-rule. Put the following line on all your HTML pages and you are ready to go. If the browser finds this rule on the old and the new page, and both pages have the same origin (the URLs are the same up to the first ”/”), it will start view transitions on the navigation from the old page to the new page.

<html>
  <head>
    <style>@view-transition {navigation: auto}</style>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Support for All Browsers

The Astro framework offers the <ViewTransitions /> component, which accomplishes something comparable to @view-transition {navigation: auto} for all browsers:

---
import { ViewTransitions } from "astro:transitions"
---


<html>
  <head>
    <ViewTransitions />
    ...
  </head>
    ...
</html>

If you now switch from one page to the next, you will also see a fading effect as the page changes. And this even works with browsers that don’t yet have native support for view transitions, such as Firefox.

It is impossible to completely emulate view transitions without native browser support. Behind the scenes, Astro emulates the most important aspects of native view transitions for browsers without native support. Of course, there are some differences and limitations, but the main impression is quite similar.

View Transition API

View transitions are much more than just a nice fade effect when navigating from one page to another. If you want to know how all these cogwheels work together on the inside, you should take a deep dive into the View Transition API.