Skip to content

Astro View Transitions — Smooth Page Navigation

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Astro View Transitions. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Astro view transitions: enable smooth page animations, configure transition types, customize animations, and improve perceived performance during navigation.

In this lesson, you'll enable Astro's view transitions API, configure transition types for page navigation, animate elements across routes, and customize the transition animations.

What You'll Learn

How to enable view transitions, configure fade, slide, and custom transitions, animate specific elements across pages, and handle transition events.

Why It Matters

Smooth page transitions make navigation feel instant and polished. View transitions replace full page loads with animated transitions, improving perceived performance.

Real-World Use

DodaTech's documentation site uses slide transitions between tutorial chapters, giving users a native-app feel during navigation.

flowchart LR
    A[Page A] -->|View Transition| B[Page B]
    B -->|View Transition| C[Page C]
    A -->|fade| B
    B -->|slide| C
    style B fill:#ff5a03,color:#fff

Enabling View Transitions

Add the client-side script to your layout:

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

Output: Navigation between pages now uses smooth transitions instead of full browser page loads. The browser URL updates, and content animates in.

Transition Types

Configure the transition per link:

<a href="/about" data-astro-transition="fade">About</a>
<a href="/blog" data-astro-transition="slide">Blog</a>

Available types: fade, slide, morph, and default (auto).

Named Transitions

Animate specific elements across pages with the same name:

Page A:

<h1 transition:name="page-title">Home</h1>

Page B:

<h1 transition:name="page-title">About</h1>

Output: The <h1> element animates smoothly from its position on page A to its position on page B, creating a seamless visual connection.

Custom Animations

Define custom CSS animations:

<style>
  @keyframes custom-enter {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes custom-leave {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
  }
</style>

Apply custom animations with transition:animate:

<div transition:animate="custom">Content</div>

Transition Events

Listen for transition lifecycle events:

<script>
  document.addEventListener('astro:page-load', () => {
    console.log('Transition completed');
  });
  document.addEventListener('astro:before-swap', () => {
    console.log('About to swap DOM');
  });
</script>

Common Mistakes

  1. Not adding <ViewTransitions /> to the layout: Without this component, transitions don't work. Add it to the <head> of your base layout.
  2. Forgetting transition:name for cross-page elements: Shared elements need matching names across pages to animate smoothly.
  3. Using transitions with external links: View transitions only work for same-site navigation. External links still perform full page loads.
  4. Overriding default transition behavior: Custom CSS animations should complement, not replace, the default fade transition for non-animated elements.
  5. Not testing on slow connections: View transitions enhance perceived speed but don't reduce actual load time. Test with throttled connections.

Practice Questions

  1. What component enables view transitions? Answer: <ViewTransitions /> from astro:transitions, added to the layout's <head>.

  2. How do you animate a specific element across pages? Answer: Use transition:name="unique-name" on the element in both pages. Elements with the same name animate seamlessly.

  3. What transition types are available? Answer: fade, slide, morph, and default (auto). Set via data-astro-transition attribute on links.

  4. How do you know when a transition completes? Answer: Listen for the astro:page-load event on document.

Challenge

Build a multi-page site with view transitions: use slide for main navigation, fade for secondary links, and add a named transition for a hero image that persists across pages.

Mini Project

Create a photo gallery with view transitions. Each photo page should have a named transition on the image element, creating a smooth "zoom in" effect when navigating from the gallery to a photo detail page.

FAQ

Do view transitions work with SSR?

: Yes. View transitions work with both static and SSR modes.

Can I disable transitions for specific browsers?

: Yes. Check for document.startViewTransition support and conditionally skip transitions in unsupported browsers.

Do view transitions affect SEO?

: No. Search engines crawl the static HTML. Transitions only affect client-side navigation.

Can I use view transitions with client-side routing?

: Yes. View transitions work with Astro's built-in navigation as well as custom router implementations.

What's Next

Learn about Astro i18n for Internationalization and multi-language site support.

← Previous Astro Sitemap and RSS — SEO Feeds Generation Next → Astro i18n — Internationalization and Multi-Language Sites

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Astro