View Transitions

SPA-like page transitions with zero JavaScript framework. Native browser APIs, full page navigation, and smooth animations.

i

What are View Transitions?

View Transitions API lets you animate between page navigations, creating smooth morphing effects between elements. Astro makes this trivially easy with the transition:name directive.

Try It Yourself

Image Gallery Demo

Click through the gallery to see images morph between list and detail views. Use your browser's back button—the transition works both ways.

→

How It Works

Enable View Transitions astro 
---
// In your layout or page
import { ViewTransitions } from 'astro:transitions';
---

<html>
  <head>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>
Name Your Elements astro 
<!-- List page -->
<img
  src={item.image}
  transition:name={`image-${item.id}`}
/>

<!-- Detail page -->
<img
  src={item.image}
  transition:name={`image-${item.id}`}
/>

<!-- Same name = morph animation! -->

Transition Types

morph (default)

Elements with matching transition:name smoothly transform between pages. Size, position, and content animate together.

fade

Cross-fade between old and new content. Use transition:animate="fade" for simple opacity transitions.

slide

Slide content in from the side. Great for navigation patterns. Use transition:animate="slide".

Custom

Define your own CSS animations with transition:animate={myAnimation}. Full control over keyframes and timing.

Benefits Over SPAs

  • ✓ No client-side router needed
  • ✓ Works with browser navigation
  • ✓ Native browser API (progressive enhancement)
  • ✓ Zero JavaScript for basic transitions
  • ✓ SEO-friendly full page navigation
  • ✓ Accessible by default