--- title: Revealed: React's experimental animations API | daily.dev description: React is introducing its first native animation API, an experimental <ViewTransition /> component built on the browser's View Transition API, currently... canonical: https://daily.dev/posts/revealed-react-s-experimental-animations-api-ii5hextir twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Revealed: React's experimental animations API | daily.dev og:description: React is introducing its first native animation API, an experimental <ViewTransition /> component built on the browser's View Transition API, currently... og:url: https://daily.dev/posts/revealed-react-s-experimental-animations-api-ii5hextir og:image: https://api.daily.dev/og/posts/Ii5HEXTir.png og:image:alt: Revealed: React's experimental animations API og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Revealed: React's experimental animations API **[Motion](https://daily.dev/sources/motion)** · 10 min read · 0 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## 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._ ## Similar posts on daily.dev - [React’s ViewTransition Element – Frontend Masters Blog](https://daily.dev/posts/react-s-viewtransition-element-frontend-masters-blog-2rrseyrvd) · Frontend Masters · 5 upvotes · 0 comments - [React 19.3 – React](https://daily.dev/posts/react-19-3-react-sfqiftbgy) · React · 186 upvotes · 26 comments --- Tags: [#react](https://daily.dev/tags/react), [#nextjs](https://daily.dev/tags/nextjs) [View this post on daily.dev](https://daily.dev/posts/revealed-react-s-experimental-animations-api-ii5hextir) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Revealed: React's experimental animations API","url":"https://daily.dev/posts/revealed-react-s-experimental-animations-api-ii5hextir","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/revealed-react-s-experimental-animations-api-ii5hextir"},"datePublished":"2026-08-23T12:21:34.077Z","dateModified":"2026-08-23T12:38:32.271Z","description":"React is introducing its first native animation API, an experimental component built on the browser's View Transition API, currently...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/aa2e7203b0427c985d41bab3449c0220?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/aa2e7203b0427c985d41bab3449c0220?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Motion","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Motion","logo":"https://media.daily.dev/image/upload/s--3YxvsrZb--/f_auto,q_auto/v1787487450/logos/motion?_a=BAMAMicg0","url":"https://daily.dev/sources/motion"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/revealed-react-s-experimental-animations-api-ii5hextir","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,nextjs","timeRequired":"PT10M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Motion","item":"https://daily.dev/sources/motion"},{"@type":"ListItem","position":3,"name":"Revealed: React's experimental animations API"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/revealed-react-s-experimental-animations-api-ii5hextir#faq","mainEntity":[{"@type":"Question","name":"How do I use React's new experimental ViewTransition component?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"Why can't I just use the browser's View Transition API directly in a React app?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@type":"Question","name":"What's the difference between React's ViewTransition component and Motion's layout animations?","acceptedAnswer":{"@type":"Answer","text":"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."}}]} ```