react-view-transitions

Shared element transitions in React animate elements morphing between views across routes or states. You wrap components with a declarative component and use transition utilities to tag and trigger context-specific morphs during navigation.

The native view transition API works with Next.js by supporting the app router, server components, and transition types on links. This integration provides optimized routing transitions for smoother navigational UI flows.

To use native view transitions in React, you need React in Canary version and react-dom installed. Custom CSS is also required to define the specific animations for entering, exiting, sharing, and list reordering.

You animate list reordering and Suspense reveals using native view transition APIs. A declarative component applies the transitions, while ready-to-copy CSS pseudo-element recipes handle the actual fade, slide, and scale effects.

The best way to trigger context-specific animations like directional slides is using transition tagging utilities. You call a function to add transition types during a transition start, then match those types with provided CSS recipes for performant effects.