E
Eastvale
Back to blog
tutorial · 5 min read

View Transitions in Astro: Native Page Animations Without a Framework

E
Eastvale Team

Single-page apps got one thing right: smooth page transitions. But they got it at the cost of shipping an entire client-side router.

Astro 3.0+ supports the View Transitions API natively. Full-page navigations that feel like SPA transitions — with zero JavaScript overhead.

Setup

Add the <ViewTransitions /> component to your layout:

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

That’s it. Every page navigation now cross-fades smoothly.

Custom Animations

Want more control? Use transition:name to link elements across pages:

<!-- Blog listing page -->
<img transition:name={`post-${post.slug}`} src={post.image} />

<!-- Blog post page -->
<img transition:name={`post-${slug}`} src={frontmatter.image} />

Astro automatically morphs the image from its position on the listing page to its position on the post page. No animation library needed.

Browser Support

View Transitions work in Chrome and Edge today. For other browsers, Astro gracefully falls back to instant navigation — no broken experience.

We cover this in depth in Module 4 of the course.