React Labs: View Transitions, Activity, and more – React

April 23, 2025 by Ricky Hanlon
In React Labs posts, we write about projects in active research and development. In this post, we’re sharing two new experimental features that are ready to try today, and updates on other areas we’re working on now.
Today, we’re excited to release documentation for two new experimental features that are ready for testing:
We’re also sharing updates on new features currently in development:
<Activity /> has shipped in react@19.2.
<ViewTransition /> and addTransitionType are now available in react@canary.
View Transitions and Activity are now ready for testing in react@experimental. These features have been tested in production and are stable, but the final API may still change as we incorporate feedback.
You can try them by upgrading React packages to the most recent experimental version:
Read on to learn how to use these features in your app, or check out the newly published docs:
React View Transitions are a new experimental feature that makes it easier to add animations to UI transitions in your app. Under-the-hood, these animations use the new startViewTransition API available in most modern browsers.
To opt-in to animating an element, wrap it in the new <ViewTransition> component:
This new component lets you declaratively define “what” to animate when an animation is activated.
You can define “when” to animate by using one of these three triggers for a View Transition:
By default, these animations use the default CSS animations for View Transitions applied (typically a smooth cross-fade). You can use view transition pseudo-selectors to define “how” the animation runs. For example, you can use * to change the default animation for all transitions:
When the DOM updates due to an animation trigger—like startTransition, useDeferredValue, or a Suspense fallback switching to content—React will use declarative heuristics to automatically determine which <ViewTransition> components to activate for the animation. The browser will then run the animation that’s defined in CSS.
If you’re familiar with the browser’s View Transition API and want to know how React supports it, check out How does <ViewTransition> Work in the docs.
In this post, let’s take a look at a few examples of how to use View Transitions.
We’ll start with this app, which doesn’t animate any of the following interactions:
View Transitions are meant to be used for UI transitions such as navigation, expanding, opening, or re-ordering. They are not meant to replace all the animations in your app.
In our example app above, notice that there are already animations when you click the “like” button and in the Suspense fallback glimmer. These are good use cases for CSS animations because they are animating a specific element.
Our app includes a Suspense-enabled router, with page transitions already marked as Transitions, which means navigations are performed with startTransition:
startTransition is a View Transition trigger, so we can add <ViewTransition> to animate between pages:
When the url changes, the <ViewTransition> and new route are rendered. Since the <ViewTransition> was updated inside of startTransition, the <ViewTransition> is activated for an animation.
By default, View Transitions include the browser default cross-fade animation. Adding this to our example, we now have a cross-fade whenever we navigate between pages:
Since our router already updates the route using startTransition, this one line change to add <ViewTransition> activates with the default cross-fade animation.
If you’re curious how this works, see the docs for How does <ViewTransition> work?
In this example, we’re wrapping the root of the app in <ViewTransition> for simplicity, but this means that all transitions in the app will be animated, which can lead to unexpected animations.
To fix, we’re wrapping route children with "none" so each page can control its own animation:
In practice, navigations should be done via “enter” and “exit” props, or by using Transition Types.
By default, <ViewTransition> includes the default cross-fade from the browser.
To customize animations, you can provide props to the <ViewTransition> component to specify which animations to use, based on how the <ViewTransition> activates.
For example, we can slow down the default cross fade animation:
And define slow-fade in CSS using view transition classes:
Now, the cross fade is slower:
See Styling View Transitions for a full guide on styling <ViewTransition>.
When two pages include the same element, often you want to animate it from one page to the next.
To do this you can add a unique name to the <ViewTransition>:
Now the video thumbnail animates between the two pages:
By default, React automatically generates a unique name for each element activated for a transition (see How does <ViewTransition> work). When React sees a transition where a <ViewTransition> with a name is removed and a new <ViewTransition> with the same name is added, it will activate a shared element transition.
For more info, see the docs for Animating a Shared Element.