Skip to main content
astro transitions ux

View Transitions in Astro

The Problem with Page Navigations

Traditional multi-page applications (MPAs) suffer from jarring full-page reloads. Single-page applications (SPAs) solve this with client-side routing, but at the cost of large JavaScript bundles.

Enter View Transitions

The View Transitions API is a native browser feature that enables smooth animations between page navigations — without any JavaScript router.

Astro integrates this API with a simple component:

---
import { ViewTransitions } from 'astro:transitions';
---
<head>
  <ViewTransitions />
</head>

Page-Level Transitions

With <ViewTransitions /> in your layout, every page navigation gets a smooth crossfade animation by default. No configuration needed.

Element-Level Morph

The real magic happens with transition:name. When two pages share an element with the same transition name, the browser morphs one into the other:

<!-- Blog card -->
<h2 transition:name={`article-title-${slug}`}>{title}</h2>

<!-- Article page -->
<h1 transition:name={`article-title-${slug}`}>{title}</h1>

The card title smoothly transforms into the article title during navigation.

Persisting Islands

Interactive components normally reset on navigation. Use transition:persist to keep an island’s state across pages:

<Counter client:load transition:persist />

Browser Support

View Transitions are supported in Chrome, Edge, and Opera. Firefox and Safari fall back to standard navigation — progressive enhancement at its best.

← Back to Blog