view-transitions

View Transitions

Part of Agent Skills™ by googleadsagent.ai™

Description

View Transitions implements the React View Transition API for seamless animated transitions between UI states and routes. This skill covers the <ViewTransition> component, addTransitionType for classifying transitions, CSS pseudo-elements for animation control, shared element transitions across routes, and integration with Next.js App Router.

View transitions eliminate the jarring jump between pages that makes web applications feel inferior to native apps. By capturing a snapshot of the outgoing state and cross-fading it with the incoming state, the browser creates a smooth visual continuity that preserves user context during navigation. React's implementation hooks into the concurrent rendering model, enabling transitions to be interruptible and prioritized.

Shared element transitions take this further: a thumbnail on a list page morphs into a full-size hero image on the detail page, maintaining visual identity across route changes. The CSS view-transition-name property establishes the relationship between elements, and the browser handles the interpolation automatically.

Use When

• Navigating between routes in a React or Next.js application
• Animating list-to-detail transitions with shared elements
• Adding entrance/exit animations to page content
• Implementing back/forward navigation with directional animations
• The user requests smooth page transitions or "native-like" feel
• Replacing manual FLIP animation implementations

How It Works

sequenceDiagram
    participant User
    participant React
    participant Browser
    participant CSS

    User->>React: Navigate to new route
    React->>Browser: startViewTransition()
    Browser->>Browser: Capture old state snapshot
    React->>React: Update DOM (concurrent)
    Browser->>Browser: Capture new state snapshot
    Browser->>CSS: Apply ::view-transition pseudo-elements
    CSS->>Browser: Animate old → new
    Browser->>User: Smooth transition rendered