Skip to content

View Transitions in Astro — Smooth Navigation Without the Cost

Hermes Team · · 3 min read
Smooth page transitions

Astro’s View Transitions API gives you smooth, app-like navigation between pages—without shipping a full client-side router. It’s one of the most underrated features for content sites. Here’s how it works and how to use it well.

The Problem with Traditional Navigation

When you click a link on a static site, the browser does a full page load:

  1. Request the new HTML
  2. Parse and render
  3. Replace the entire document
  4. Scroll jumps, content flashes, layout shifts

It works, but it feels abrupt. Users lose context. The experience feels disjointed compared to a single-page app.

What View Transitions Solve

The View Transitions API is a browser feature that lets you animate between document changes. Astro wraps it in a simple component:

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

That’s it. Add it once to your layout, and every internal link gets smooth crossfade transitions. No configuration. No client-side routing. No hydration of the entire page.

How It Works

  1. Interception — Astro intercepts clicks on same-origin links
  2. Fetch — Fetches the new page in the background
  3. Transition — Uses the View Transitions API to animate the swap
  4. Update — Replaces the document with minimal disruption

The browser handles the animation. Astro handles the orchestration. You get the polish without the complexity.

Customizing Animations

By default, Astro uses a crossfade. You can customize per-page or per-element:

---
import { ViewTransitions } from 'astro:transitions';
---
<ViewTransitions>
  <Transition name="slide" />
</ViewTransitions>

Or target specific elements with transition:name in your CSS for shared element transitions—like a hero image that morphs between the list view and the detail view.

Fallback for Older Browsers

Browsers that don’t support View Transitions fall back to instant navigation. No JavaScript error. No broken experience. The site still works; it just doesn’t animate.

Astro sets data-astro-view-transitions-fallback so you can detect and optionally polyfill, but for most content sites, the fallback is perfectly acceptable.

Performance Considerations

  • Minimal JS — The View Transitions runtime is small. It doesn’t hydrate your content.
  • No double fetch — Astro reuses the same fetch for both the transition and the final render.
  • Respects prefetch — If you add data-astro-prefetch, Astro prefetches on hover for even snappier transitions.

Best Practices

  1. Keep transitions short — 200–300ms feels responsive. Longer feels sluggish.
  2. Don’t animate everything — Reserve transitions for meaningful navigation, not every state change.
  3. Test the fallback — Disable JavaScript or use an older browser to ensure the site still works.
  4. Avoid layout shift — Ensure shared elements have consistent dimensions to prevent CLS during the transition.

When to Use It

View Transitions shine for:

  • Blog and documentation sites
  • Marketing pages with multiple sections
  • Portfolios with project detail pages
  • Any content site where users navigate between pages frequently

They’re less useful for:

  • Single-page apps with complex client state
  • Sites where every “page” is actually a modal or tab
  • Pages with heavy, dynamic content that changes on every view

Hermes Prime includes View Transitions out of the box. Add the component, and your site gains instant polish with almost zero effort.