Revealed: React's experimental animations API

React is introducing its first native animation API, an experimental component built on the browser's View Transition API, currently available in React's experimental release channel and Next.js canary builds starting at 15.2.0-canary.6.

It solves two long-standing integration problems with view transitions in React (needing to start transitions before state updates, and requiring flushSync), by hooking deep into React's render cycle and only working with async updates like startTransition and Suspense.

The component automatically manages view-transition-name assignment, supports shared element and crossfade animations, and exposes event handlers (onEnter, onLeave, onLayout, onUpdate, onShare) for custom animation control via the Web Animations API.

The author, who builds the Motion for React library, compares it against Motion's own layout animations, noting the tradeoffs of interruptibility versus bundle size, and shares thoughts on how Motion might build on top of this new primitive.

Table of contents

• View transitions 101
• Get started
• Basic usage
• Switching children
• Shared element animations
• Customising animations
• Where does this leave Motion for React?

Questions this post answers

How do I use React's new experimental ViewTransition component?

Install react and react-dom on the experimental channel, or for Next.js install a canary version of at least 15.2.0-canary.6 and enable it in next.config. Since it is unstable, import it as unstable_ViewTransition. Wrap a component with it and trigger the state change inside React's startTransition, otherwise the animation will not fire. Developers testing bleeding-edge React APIs like this track breaking changes and setup quirks on daily.dev.

Why can't I just use the browser's View Transition API directly in a React app?

Integrating document.startViewTransition with React causes two problems: you must start the transition before the state update, and that update must be wrapped in flushSync, which blocks the main thread until rendering completes. This freezes the page and prevents interruption or cancellation, producing noticeably worse performance than React's new ViewTransition component, which hooks into the render cycle to trigger transitions later and only supports async updates. Anyone weighing native view transitions against a framework wrapper can follow the tradeoffs on daily.dev.

What's the difference between React's ViewTransition component and Motion's layout animations?

Layout animations in Motion for React use transforms and scale-distortion correction rather than screenshot-based pseudo-elements, making them interruptible, aware of scroll offset changes, and better suited to nested or relative animations. ViewTransition, based on the browser's View Transition API, is not interruptible but avoids the roughly 33kb cost of the motion component, trading some flexibility for a smaller bundle size. Teams picking an animation approach for React can compare tradeoffs like these on daily.dev.