skills.rest
danielbere1973
danielbere1973COMMUNITY
Explore all skills by this author →
GitHub

vercel-react-view-transitions

Implement React View Transition animations for route changes, shared elements, and Suspense reveals.

Updated May 15, 2026
Search Tags:#react#css#next.js#navigation#animation#view transitions#shared element
One-click install
npx skills add https://github.com/danielbere1973/promoar --skill vercel-react-view-transitions-danielbere1973
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-view-transitions
Source: https://github.com/danielbere1973/promoar/tree/main/.agents/skills/vercel-react-view-transitions
Command: npx skills add https://github.com/danielbere1973/promoar --skill vercel-react-view-transitions-danielbere1973

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Adding smooth, native-feeling animations between UI states in React is error-prone: developers must correctly coordinate <ViewTransition> placement, startTransition triggers, transition types, and CSS pseudo-elements, while avoiding silent failures like nested VT suppression and layout-level VT mistakes. ## Core Features & Use Cases - Step-by-step implementation workflow: Audit the app's navigation map, isolate persistent elements, add directional page transitions, Suspense reveals, and shared element morphs in a defined order. - Ready-to-use CSS recipes: Copy-paste animations for fade, slide, directional navigation, shared element morph, text morph, scale, and reduced-motion accessibility. - Next.js integration guidance: Covers the experimental.viewTransition flag, the transitionTypes prop on next/link, loading.tsx Suspense boundaries, and same-route dynamic segment transitions. - Use Case: When building a Next.js photo gallery, use this Skill to add forward/back directional slides between list and detail pages, morph shared thumbnail images across routes, and animate skeleton-to-content reveals. ## Quick Start Ask the agent to add view transitions to your React or Next.js app, starting with an audit of all links, Suspense boundaries, and shared visual elements.

Frequently Asked Questions about vercel-react-view-transitions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add page transition animations in React?▼

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

How do I animate route changes in Next.js App Router?▼

Enable `experimental.viewTransition: true` in next.config.js so every `<Link>` navigation is wrapped in `document.startViewTransition`. Then use the `transitionTypes` prop on `<Link>` or `startTransition` with `addTransitionType` and `router.push()` for programmatic navigation.

Does ViewTransition work with stable React versions?▼

No, `<ViewTransition>` is not in stable React. Outside Next.js you must install `react@canary` and `react-dom@canary`. In Next.js the App Router already bundles React canary internally, so it works out of the box.

Why is my ViewTransition enter or exit animation not firing?▼

Common causes: the `<ViewTransition>` is wrapped by a DOM node instead of preceding it, the state update is not inside `startTransition`, or the VT is nested inside a parent VT (nested VTs never fire enter/exit). Layout-level VTs also suppress page-level animations.

How do I create shared element transitions between two views?▼

Give two `<ViewTransition>` components the same unique `name` prop on the source and target views, with one unmounting and the other mounting in the same transition. Use `share="morph"` with the morph CSS recipe for a controlled shared element animation.

Why doesn't router.back() trigger view transition animations?▼

`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 to preserve animations.

Related Skills

Explore More Software Engineering Skills→
quangtuyennguyenquangtuyennguyen

vercel-react-view-transitions

Implements native view transition animations in React and Next.js applications.

Community
Advanced
trystan2ktrystan2k
1

react-view-transitions

Implement native View Transition API animations for React applications.

Community
Intermediate
UncodierUncodier

animations-framer-gsap

Implement accessible UI animations for web apps using Framer Motion and GSAP with reduced-motion support.

Community
Advanced
mauriciodelriomauriciodelrio
3

animations-and-transitions

Implement performant UI animations in React/Next.js with Framer Motion and CSS transitions.

Community
Intermediate