AstroShowcase
Rendering Beginner Astro 6.3

View Transitions

Add silky-smooth page animations with a single directive — no JavaScript framework required.

What are View Transitions?

View Transitions let you animate the navigation between pages using the browser’s native View Transitions API. Astro makes this a single-line addition — add <ViewTransitions /> to your layout and you get cross-fade animations for free. You can then assign view-transition-name on any element to create matched-element animations (like a photo that “flies” from a thumbnail to a full-size view).

▶ Page Navigation Demo

Click a card below to simulate a smooth page transition — the same effect Astro's astro:transitions directive produces between real pages.

Page A · /blog Active

Building with Astro 6

The new Content Layer API makes managing structured content effortless...

Page B · /about Active

About This Site

A showcase for the Astro community — submit your site and get featured!

How it works

1

Add the ViewTransitions component to your layout

Import and render <ViewTransitions /> inside the <head> of your base layout. This enables client-side navigation for all pages that use that layout.

---
import { ViewTransitions } from 'astro:transitions'
---
<html>
  <head>
    <ViewTransitions />
  </head>
  <body>...</body>
</html>
2

Name elements you want to animate

Add transition:name to any element. Astro will animate between the matching element on the old page and the same-named element on the new page.

<!-- Blog index — thumbnail -->
<img src={post.cover} transition:name={`cover-${post.slug}`} />

<!-- Blog post — full-size hero -->
<img src={post.cover} transition:name={`cover-${post.slug}`} />
3

Choose an animation style (optional)

Astro ships four built-in directives. You can also write your own CSS animations.

<!-- default: fade -->
<main transition:animate="fade" />

<!-- slide left/right -->
<main transition:animate="slide" />

<!-- no animation on this element -->
<nav transition:animate="none" />

Key props & directives

DirectiveDescription
transition:nameUnique name — matched elements morph between pages
transition:animateAnimation style: fade, slide, morph, none
transition:persistKeep element alive across navigations (e.g. audio player)
Tip

View Transitions require a browser that supports the native API (Chrome 111+, Edge 111+). Astro falls back to a full page load on unsupported browsers automatically.

Warning

Avoid giving two different elements the same transition:name on the same page — the browser will throw an error because names must be unique per document.

Further reading