View Transitions API

Smooth page and component transitions with document.startViewTransition(). The browser snapshots old and new states, then animates between them automatically.

Uses view-transition-name for shared element identity, ::view-transition-old() / ::view-transition-new() for custom animations.

Stable Chrome 111+ · Edge 111+ · Safari 18+

Tab Switching

Click tabs to trigger startViewTransition() with slide-in/slide-out.

What are View Transitions?

The View Transitions API provides a mechanism for creating animated transitions between different DOM states. The browser captures a screenshot of the current state, you make your DOM changes, then the browser captures the new state and animates between the two snapshots.

This is fundamentally different from CSS transitions -- you're not animating properties, you're animating between complete visual states. This means layout changes, element additions/removals, and even full page navigations can be smoothly animated.

Key Capabilities

  • Automatic cross-fade between any DOM states
  • Shared element transitions via view-transition-name
  • Custom entry/exit animations per element
  • Works with SPA routers and MPA navigation
  • Compositor-driven, no layout thrashing
  • Graceful degradation (instant swap if unsupported)

Implementation Pattern

Wrap your DOM mutation in document.startViewTransition(). The browser handles the rest. For shared element transitions, assign the same view-transition-name to the element in both old and new states -- the browser interpolates position, size, and visual properties automatically.

Customize animations with ::view-transition-old(name) and ::view-transition-new(name) pseudo-elements. Each gets the captured snapshot as content, which you can animate with standard CSS animations.

Browser Support

Same-document view transitions (SPA) are stable in Chrome 111+, Edge 111+, and Safari 18+. Cross-document (MPA) view transitions landed in Chrome 126+ and are progressing in other browsers. The API is designed for progressive enhancement -- always feature-detect with if (document.startViewTransition).

  • Chrome/Edge 111+ (SPA)
  • Safari 18+ (SPA)
  • Chrome 126+ (MPA)
  • Firefox: in development

Shared Element Transitions

Click a card to expand it. The card's view-transition-name creates a shared element transition -- the browser morphs the card's position, size, and shape into the expanded view.

Anchor Positioning

CSS-only tooltips, dropdowns, and popovers anchored to trigger elements.

Scroll-Driven

Parallax, progress bars, and reveals driven entirely by scroll position.

View Transitions

Smooth state transitions with browser-captured snapshots and morphing.

Key Patterns

/* 1. Basic view transition (JS) */
document.startViewTransition(() => {
  // Make your DOM changes here
  panel.classList.remove('active');
  newPanel.classList.add('active');
});

/* 2. Shared element identity (CSS) */
.card  { view-transition-name: card-1; }
.detail { view-transition-name: card-1; }
/* Same name = browser morphs between them */

/* 3. Custom transition animations (CSS) */
::view-transition-old(tab-content) {
  animation: slide-out 0.25s ease;
}
::view-transition-new(tab-content) {
  animation: slide-in 0.25s ease;
}