Page Transitions with the CSS View Transitions API

For years, smooth page transitions required a JavaScript framework — React, Framer Motion, Barba.js. The View Transitions API changes that. Here is the state of it in 2025.

How It Works

When you call document.startViewTransition(callback), the browser takes a screenshot of the current state, runs the callback (which updates the DOM), then animates between the two states. By default you get a cross-fade. You control the animation entirely with CSS.

::view-transition-old(root) {
  animation: fade-out 200ms ease;
}
::view-transition-new(root) {
  animation: fade-in 200ms ease;
}

Named Transitions — The Powerful Part

Assign view-transition-name to a specific element and the browser will morph it between pages independently of the root transition. A card thumbnail can seamlessly become the hero image of the next page — with no JavaScript position tracking.

.project-card {
  view-transition-name: project-hero;
}

Using It With Next.js App Router

Next.js doesn't natively wire View Transitions into its router yet, but you can intercept navigation via a custom Link wrapper that calls startViewTransition before pushing the route. Add a check for document.startViewTransition to keep the fallback graceful in browsers that don't support it yet.

Browser Support in 2025

Cross-document View Transitions (the declarative CSS-only version) landed in Chrome 126 and Safari 18.2. Firefox support is in progress behind a flag. For same-document transitions the JavaScript API has been stable in Chromium since Chrome 111. Progressive enhancement is the right approach for now.