Frontend & Design

View Transitions API

Create smooth, native page transitions with the View Transitions API, enabling animated navigation without JavaScript frameworks.

Claude Code Cursor Copilot Windsurf

Overview

The View Transitions API enables smooth animated transitions between page states or between pages during navigation. AI agents can implement both same-document transitions (for SPAs) and cross-document transitions (for MPAs) using the `document.startViewTransition()` API and CSS `view-transition-name` properties.

For same-document transitions, your AI agent can wrap state updates in `document.startViewTransition()` to animate between old and new DOM states. For cross-document MPA transitions, it can add the `@view-transition` at-rule and `view-transition-name` CSS properties to create shared element transitions between pages without any JavaScript.

Frameworks like Astro, Next.js, and SvelteKit have built-in View Transitions support. AI agents can implement hero image transitions, list-to-detail animations, page crossfades, and morph transitions that make multi-page applications feel as smooth as native apps.

Who Is This For?

Developers adding page transitions to multi-page applications
Teams implementing shared element animations between routes
Frontend engineers creating app-like navigation in Astro or Next.js
Designers implementing smooth state transitions without heavy libraries

Installation

Setup for Claude Code

View Transitions API is built into modern browsers — no install needed

Configuration

/* CSS for cross-document transitions */
@view-transition { navigation: auto; }

.hero-image {
  view-transition-name: hero;
}

::view-transition-old(hero) {
  animation: fade-out 0.3s ease-out;
}
::view-transition-new(hero) {
  animation: fade-in 0.3s ease-in;
}

/* JS for same-document transitions */
document.startViewTransition(() => {
  updateDOM();
});