How to animate state and route changes with React's ViewTransition, transition types and view-transition CSS, including Next.js specifics.
$ npx skills add https://craftwork.design/skills/react-view-transitions -a claude-code -y
Installs into .claude/skills/react-view-transitions. Add -g for every project.
SKILL.md
Animate between UI states using the browser's native document.startViewTransition. Declare what with <ViewTransition>, trigger when with startTransition / useDeferredValue / Suspense, control how with CSS classes. Unsupported browsers skip animations gracefully.
When to Animate
Every <ViewTransition> should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.
Implement all applicable patterns from this list, in this order:
This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.
Choosing Animation Style
Context
Animation
Why
Hierarchical navigation (list → detail)
Type-keyed nav-forward / nav-back
Communicates spatial depth
Lateral navigation (tab-to-tab)
Bare <ViewTransition> (fade) or default="none"
No depth to communicate
Suspense reveal
enter/exit string props
Content arriving
Revalidation / background refresh
default="none"
Silent — no animation needed
Reserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev/next photo, carousel, paginated results). For ordered sequences, the direction communicates position: "next" slides from right, "previous" from left. Lateral/unordered navigation (tab-to-tab) should not use directional slides — it falsely implies spatial depth.
Availability
Next.js: Do not install react@canary — the App Router already bundles React canary internally. ViewTransition works out of the box. npm ls react may show a stable-looking version; this is expected.
Without Next.js: Install react@canary react-dom@canary (ViewTransition is not in stable React).
Browser support: Chromium 125+ (React needs the v2 object form of startViewTransition), Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.
Implementation Workflow
When adding view transitions to an existing app, follow references/implementation.md step by step. Start with the audit — do not skip it. Use references/css-recipes.md for the applicable CSS and adapt it to the app.
Core Concepts
The <ViewTransition> Component
import { ViewTransition } from 'react';
<ViewTransition>
<Component />
</ViewTransition>
React auto-assigns a unique view-transition-name and calls document.startViewTransition behind the scenes. Never call startViewTransition yourself.
Animation Triggers
Trigger
When it fires
enter
<ViewTransition> first inserted during a Transition
exit
<ViewTransition> first removed during a Transition
update
DOM mutations inside a <ViewTransition>, or the boundary itself changing size/position due to an immediate sibling. With nested VTs, mutation applies to the innermost one
share
Named VT unmounts and another with same name mounts in the same Transition
Only startTransition, useDeferredValue, or Suspense activate VTs. Regular setState does not animate.
Critical Placement Rule
<ViewTransition> only activates enter/exit if it appears before any DOM nodes:
// Works
<ViewTransition enter="auto" exit="auto">
<div>Content</div>
</ViewTransition>
// Broken — div wraps the VT, suppressing enter/exit
<div>
<ViewTransition enter="auto" exit="auto">
<div>Content</div>
</ViewTransition>
</div>
Styling with View Transition Classes
Props
Values: "auto" (browser cross-fade), "none" (disabled), "class-name" (custom CSS), or { [type]: value } for type-specific animations.
Tag transitions with addTransitionType so VTs can pick different animations based on context. Call it multiple times to stack types — different VTs in the tree react to different types:
router.back() and the browser's back/forward buttons carry no transition types, so type-keyed animations (directional slides) resolve to their default and don't play — untyped shared-element morphs still apply. For typed animations, use router.push() with an explicit URL.
Types and Suspense
Types are available during navigation but not during subsequent Suspense reveals (separate transitions, no type). Use type maps for page-level enter/exit; use simple string props for Suspense reveals.
Shared Element Readiness
A shared element transition can pair elements only when both the old and new views are rendered in the same Transition. If incoming content suspends, only its fallback exists for that update; the resolved content appears in a later Suspense transition and can be animated separately.
Shared Element Transitions
Same name on two VTs — one unmounting, one mounting — creates a shared element morph:
<ViewTransition name="hero-image">
<img src="/thumb.jpg" onClick={() => startTransition(() => onSelect())} />
</ViewTransition>
// On the other view — same name
<ViewTransition name="hero-image">
<img src="/full.jpg" />
</ViewTransition>
Only one VT with a given name can be mounted at a time — use unique names (photo-${id}). Watch for reusable components: if a component with a named VT is rendered in both a modal/popover and a page, both mount simultaneously and break the morph. Either make the name conditional (via a prop) or move the named VT out of the shared component into the specific consumer.
share takes precedence over enter/exit. Think through each navigation path: when no matching pair forms (e.g., the target page doesn't have the same name), enter/exit fires instead. Consider whether the element needs a fallback animation for those paths.
Two ways a wired-up morph silently never fires: (1) default="none" with no explicit share prop — share resolves to none; (2) type-keyed share where the navigation never adds the type — a plain link click resolves the map's default. Every link that should morph must add the type (transitionTypes on next/link, or addTransitionType).
Never use a fade-out exit on pages with shared morphs — use a directional slide instead.
Trigger inside startTransition. Avoid wrapper <div>s between list and VT.
Layout Displacement Morph
Only content inside an activated boundary animates position — everything else teleports to its new layout spot. Wrap the sibling content below a growing/shrinking list in a bare <ViewTransition> so it glides instead of jumping. See Layout Displacement Morph.
Composing Shared Elements with List Identity
Shared elements and list identity are independent concerns — don't confuse one for the other. When a list item contains a shared element (e.g., an image that morphs into a detail view), use two nested <ViewTransition> boundaries:
The outer VT handles list reorder/enter animations. The inner VT handles the cross-route shared element morph. Missing either layer means that animation silently doesn't happen.
Every VT matching the trigger fires simultaneously in a single document.startViewTransition. VTs in different transitions (navigation vs later Suspense resolve) don't compete.
Use default="none" Deliberately
Without it, every VT fires the browser cross-fade on every transition — Suspense resolves, useDeferredValue updates, background revalidations. Use default="none" on named/shared elements and type-keyed page VTs.
But it also turns off update (layout/reflow morphs) and share (a named pair with no explicit share prop never morphs). Keyed list items and displaced siblings want update — leave them bare or set update="auto".
Two Patterns Coexist
Pattern A — Directional slides: Type-keyed VT on each page, fires during navigation.
Pattern B — Suspense reveals: Simple string props, fires when data loads (no type).
They coexist because they fire at different moments. default="none" on both prevents cross-interference. Always pair enter with exit. Place directional VTs in page components, not layouts.
Nested VT Limitation
When a parent VT mounts/unmounts as one unit with nested VTs inside it, the nested ones do not fire their own enter/exit — only the outermost VT animates. (A child VT mounted inside a persistent parent VT fires enter/exit normally.) Per-item staggered animations during page navigation are not currently available in Next.js; see troubleshooting for the upstream experimental status.
Next.js Integration
For Next.js integration (transitionTypes on next/link and useRouter, App Router patterns, Server Components), see references/nextjs.md.
