React View Transitions

Implementing smooth animations using React's View Transition API — enabling native-feeling transitions without third-party libraries.

Core Mechanics

The <ViewTransition> component automatically assigns unique names and triggers document.startViewTransition. It must appear before any DOM nodes to activate enter/exit animations. Regular state updates don't animate — only transitions using startTransition, useDeferredValue, or Suspense activate animations.

Animation Priority Order

Design animations in this order of semantic communication:

1. Shared element transitions — communicates "same thing — going deeper"
2. Suspense reveals — communicates "data loaded"
3. List identity via keys — communicates "same items, new arrangement"
4. State enter/exit — communicates "something appeared/disappeared"
5. Route-level changes — communicates "going to a new place"

Animation Triggers

• enter: fires when component first inserts during a transition
• exit: fires when component first removes during a transition
• update: fires on DOM mutations inside the component
• share: fires when a named ViewTransition unmounts while another with the same name mounts

Key Principle

Declare what with <ViewTransition>, trigger when with startTransition/useDeferredValue/Suspense, control how with CSS classes.

Use default="none" liberally to prevent unwanted cross-fades on every state update.

Styling Approach

Animations are controlled through CSS classes via props: enter, exit, share, default. Apply CSS @keyframes targeting the ::view-transition-* pseudo-elements.

Browser Support

• Chromium 111+
• Firefox 144+
• Safari 18.2+
• Graceful degradation on unsupported browsers (transitions simply don't animate)

Next.js Specifics

The App Router already bundles React canary internally — no need to install it separately to access the View Transition API.

Installation

npx skills add https://github.com/vercel-labs/agent-skills --skill react-view-transitions

Mirrored from https://github.com/vercel-labs/agent-skills — original author: vercel-labs, license: MIT. This is an unclaimed mirror. Content and ownership transfer to the author when they claim this account.