View Transitions
Smooth page transitions using the native View Transitions API — no client-side router needed.
How It Works
Astro integrates the browser's native View Transitions API. When you navigate between pages, the browser smoothly animates the transition — no JavaScript router required.
Page-Level Transitions
Click any link below. Notice the smooth crossfade between pages:
- Home
Static landing page with zero JS
- About
Tech stack and project goals
- Blog
Blog index — click an article to see title morph
- Islands Demo
Page with interactive islands
- Edge Demo
SSR page at Cloudflare edge
Element-Level Morph
When two pages share an element with the same transition:name,
the browser morphs one into the other. Try it:
Technical Details
Setup
Add <ViewTransitions /> to your layout's
<head>. That's it — all pages get crossfade transitions.
Element Morph
Add matching transition:name="my-element" on both source and target pages.
The browser handles the animation.
Persist State
Add transition:persist to keep island state (like a counter value) across navigations.
Browser Support
Chrome, Edge, Opera. Falls back to standard navigation in Firefox/Safari — progressive enhancement.