Skip to main content

Adding View Transitions to a Static Astro Site

1 min read
astro javascript performance

The setup

A static Astro site with 15+ pages. Navigation felt clunky — full page reloads, flash of white, scroll reset.

The fix: three lines

---
// src/layouts/BaseLayout.astro
import { ViewTransitions } from "astro:transitions";
---

<html>
  <head>
    <ViewTransitions />
  </head>
  <!-- ... -->
</html>

That’s it. Cross-document view transitions, progressive enhancement, zero JavaScript bundle.

What we tweaked

The default crossfade is fine for most navigations. We added custom transitions for specific routes:

<!-- Blog listings get a slide transition -->
<a href="/blog" transition:animate="slide">
  Blog
</a>

And a morph transition for the logo in the header so it smoothly repositions between pages.

What I learned

View Transitions are the rare API that gives you 90% of the benefit for 10% of the effort. The default crossfade already eliminates the “flash” problem. Custom transitions are icing — don’t overthink them.