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 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.

So how can you gain initial experience with view transition?

Automatically on Each Navigation

You can switch on the #view-transition-on-navigation flag for some Chromium browsers. That works at least for current Chrome and Opera browsers. After that it is easy to enable view transitions on all navigation within your site: Paste the following line into all your .html files, and the browser will begin to transition pages as you navigate your site. As the name suggests, this works as long as your pages all have the same origin, i.e. URLs are the same up to the first ’/‘.

1
<html>
2
  <head>
3
    <meta name="view-transition" content="same-origin" />
4
    ...
5
  </head>
6
  <body>
7
    ...
8
  </body>
9
</html>

Level 2 of the View Transition API defines a pure CSS way to enable cross-document view transitions.

If the #view-transition-on-navigation flag is not set, either because your browser does not have it or you have not enabled it, browsers simply ignore this line.

Support for All Browsers

The Astro framework offers the <ViewTransition/> component, which accomplishes something comparable to <meta name="view-transition" content="same-origin" /> for all browsers:

1
---
2
import { ViewTransitions } from "astro:transitions"
3
---
4


5
<html>
6
  <head>
7
    <ViewTransitions />
8
    ...
9
  </head>
10
    ...
11
</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 and Safari.

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.