Summary
- Native browser animations for React UI state changes using the View Transition API.
- Declare animations with <ViewTransition> component; trigger with startTransition , useDeferredValue , or Suspense ; control styling via CSS classes and pseudo-elements Supports five animation patterns in priority order: shared elements (morphing), Suspense reveals, list identity (reorder), state changes (enter/exit), and route changes Use addTransitionType to apply context-aware animations (e.g., directional slides for hierarchical navigation, fades for lateral tabs) Works in Next.js App Router out of the box; requires react@canary for standalone React; gracefully degrades on unsupported browsers (Chromium 111+, Firefox 144+, Safari 18.2+) Includes step-by-step implementation workflow, CSS animation recipes, and patterns for shared elements, list reorder, Suspense reveals, and directional navigation