View Transitions

View Transitions create smooth animations between page navigations using the browser's native API.
Next.js automatically coordinates transitions when navigating between routes.
Transitions capture snapshots of the old and new UI, then animate between them.
Enable view transitions in next.config.ts with the experimental.viewTransition flag.
CSS controls how elements morph, fade, or slide during transitions.
Transitions gracefully degrade on unsupported browsers or when reduced motion is preferred.

next.config.ts

1import type { NextConfig } from 'next';
2
3const nextConfig: NextConfig = {
4  experimental: {
5    viewTransition: true,
6  },
7};
8
9export default nextConfig;

app/globals.css

1/* Customize the transition animation */
2// !mark
3::view-transition-old(root) {
4  animation: fade-out 0.2s ease-out;
5}
6
7// !mark
8::view-transition-new(root) {
9  animation: fade-in 0.2s ease-in;
10}
11
12/* Respect reduced motion preference */
13// !mark
14@media (prefers-reduced-motion: reduce) {
15  ::view-transition-group(*),
16  ::view-transition-old(*),
17  ::view-transition-new(*) {
18    animation: none !important;
19  }
20}

Demo

Navigate between items and watch the cross-fade/slide behavior.
Use browser back/forward to see transitions on history navigation.
Resize the viewport and confirm transitions remain smooth.

Visual Summary

View transition lifecycle

User click

Snapshot old

Route change

Animate

Interactive

Transitions skip if the browser lacks support or reduced motion is preferred.

Key Takeaways

Topic	Guidance
Best fit	Page navigations where visual continuity matters
Browser support	Progressive enhancement with graceful fallback
Accessibility	Always respect `prefers-reduced-motion`
Performance	Keep DOM changes moderate for smooth animations

Pitfalls and Tips

Avoid heavy layout shifts during transitions; keep container sizes stable.
Use motion sparingly on content-heavy pages to prevent cognitive overload.
Test with reduced motion settings to ensure no critical information is motion-only.
Named view transitions can animate specific elements across routes.

The App Router Gallery

View Transitions

Demo

Visual Summary

View transition lifecycle

Key Takeaways

Pitfalls and Tips

Learn More