This introduction to view transitions in Astro is excepted from Unleashing the Power of Astro, available now on SitePoint Premium.
The View Transitions API offers a convenient way to generate animated transitions between various DOM states while simultaneously updating the DOM content in a single operation. Achieving this has traditionally been difficult on the Web, but with this new API, transitions can be handled in a rather easy way. Studies have shown that using the View Transitions API leads to a faster perceived site performance.
Astro supports view transitions out of the box, with a built-in fallback mechanism for browsers that don’t currently support the API.
The out-of-the-box solution supports built-in animations, animations for forward and backward navigation, and automatic support for accessibility (via prefers-reduced-motion), amongst many other things.
One of the best ways to demonstrate view transitions is to utilize a video element that will maintain its state between page transitions. (Do note that we can also persist state between components that utilize the client:* directives as well.) An example of this is shown in the video below.
Let’s assume that we have a <Video /> component with this content:
—
// src/components/Video
const src=”https://res.cloudinary.com/tamas-demo/video/upload/f_auto,q_auto/imagecon/ship.mp4″;
const {
autoplay = false,
controls = true,
loop = false
} = Astro.props;
—
<video {controls} {autoplay} {loop} transition:persist>
<source {src} />
</video>
In the code above, we’re grabbing a video from Cloudinary. Additionally, we’re allowing the video to automatically play and loop (start over) when it finishes, and we’re providing control buttons for the user. These settings are determined by properties sent to this video component, and if these properties aren’t provided, default values are used. These variables are then added to the HTML <video> and <source> elements.
Please take note of the transition:persist directive. With this directive, we’ll maintain the state of the video player between transitions: while navigating to the next page, the video will keep on playing, while other parts of the page will show the updated content. We can use this component on both the index.astro and about.astro pages:
// src/pages/index.astro
—
import Video from ‘../components/Video.astro’;
—
<!– some other HTML –>
<Video />
Lastly, we need to enable page transitions, which we can either do per page or globally for the entire project. Assuming that we have a layout file of some sort, we can easily enable it, by importing ViewTransitions from astro:transitions:
// src/layouts/Layout.astro
—
import { ViewTransitions } from ‘astro:transitions’;
—
<html lang=”en”>
<head>
<title>My site!</title>
<ViewTransitions />
</head>
<body>
<slot />
</body>
</html>
In summary, the experimental View Transitions API simplifies visual transitions between various pages or elements through CSS pseudo-elements, JavaScript, and snapshots of the previous and current DOM states. It presents a fresh chance to enhance the perceived performance of a page, minimizing reliance on intricate custom JavaScript and CSS.
Want to learn more about Astro, the modern all-in-one framework to build faster, content-focused websites? Check out Unleashing the Power of Astro, available now on SitePoint Premium.
