domains / families / software-engineering / react-view-transitions

react-view-transitions

separate

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

When to use

• add page transitions
• animate route changes
• create shared element animations
• animate enter/exit of components
• animate list reorder
• implement directional navigation animations
• integrate view transitions in Next.js
• animate between UI states in React

When not to use

• using third-party animation libraries

Skill page

Source