vercel-react-view-transitions

Wrap page components in the ViewTransition component and trigger navigation inside startTransition. Use addTransitionType to tag direction (nav-forward or nav-back) and map types to CSS classes via the enter and exit props.

Give two ViewTransition components the same name prop on the source and target views, with one unmounting as the other mounts in the same transition. Names must be globally unique, so use IDs like photo-${id}.

Yes, the Next.js App Router bundles React canary internally, so ViewTransition works out of the box. Enable experimental.viewTransition in next.config.js to animate Link navigations, and use the transitionTypes prop on next/link in Next.js 15 canary or 16+.

Common causes include wrapping the ViewTransition inside a DOM node instead of placing it first, updating state outside startTransition, or nesting it inside a parent ViewTransition in a layout. Layouts persist across navigations, so place directional VTs in page components.

router.back() and browser back/forward buttons fire synchronous popstate events, which are incompatible with startViewTransition. Use router.push() with an explicit URL inside startTransition instead.

View transitions are supported in Chromium 111+, Firefox 144+, and Safari 18.2+. Unsupported browsers skip animations gracefully, so no fallback code is required.