react-view-transitions

Wrap page components in the ViewTransition component and trigger state updates inside startTransition, useDeferredValue, or Suspense. Use enter and exit props with CSS classes targeting ::view-transition-old and ::view-transition-new pseudo-elements to control the animation style.

Give two ViewTransition components the same unique name prop on the source and target views, and set the share prop to a morph class. The target element must be in the DOM at navigation time for the pair to form, so prefetch or cache its data.

Yes, ViewTransition works out of the box in the Next.js App Router because it bundles React canary internally. Enable the experimental.viewTransition flag in next.config.js and use the transitionTypes prop on next/link for typed directional animations.

Common causes include the state update not being wrapped in startTransition, a DOM node wrapping the ViewTransition which suppresses enter/exit, or default="none" blocking the trigger you want. Named shared elements also fail silently if the navigation never adds the required transition type.

React view transitions require Chromium 125 or later, Firefox 144 or later, or Safari 18.2 or later, since React needs the v2 object form of startViewTransition. Unsupported browsers skip the animations gracefully with no errors.

Avoid directional slides for lateral navigation such as tab-to-tab switches, since they falsely imply spatial depth. Use a bare ViewTransition cross-fade or default="none" for lateral navigation, and reserve slides for hierarchical or ordered sequences.