Hey there! Maybe you have been living under a rock and haven’t heard about the news: React is about to officially support View Transitions!

But if you don’t even know what view transitions are, fear not. That’s precisely why I’m writing this post—totally because I want to help you, my dear reader, and not because I want a raise.

View Transitions, What Are They? Where Do They Live? What Do They Eat?

Have you ever wondered if it was possible to animate things like justify-content from flex-start to flex-end? Well, that’s possible now! Not only with CSS, but HTML and JavaScript.

As you might already know, there are several browser APIs used by developers on a daily basis such as the Fetch API for making requests, Web Storage API to persist data wirth localStorage and sessionStorage, however, the one we’re interested in is the View Transition API.

In short, this is a new way of creating animated transitions between website views and pages, including DOM states in single-page apps (SPA)! This might seem like "just making your website prettier" but the truth is that, if you help reduce users’ cognitive load, this will help with retention and thus make you more money, am I right?

Instead of manually animating individual elements, the View Transitions API handles the heavy lifting for you. By wrapping your content changes inside a startViewTransition() function, the browser automatically figures out which elements to animate, and how to connect them across the transition.

You can check out more details in the docs:

Example Demo:
https://http203-playlist.netlify.app/

(Yeah, I know. I didn’t prepare this example myself. I said that I wanted a raise, not that I wanted to work hard for it. This example is really cool, though).

What About React.js?

Until very recently, utilizing this API alongside React came with its challenges especially since the API itself is recent news (and not even fully supported in all browsers).

A lot of progress is being made to make this reality possible in React…

…but take everything with a grain of salt since a lot of this might still be in experimental stages. Here are some takeaways:

Async vs. Sync Updates:
- View transitions only trigger for async updates (e.g., startTransition, useDeferredValue, “). Synchronous updates opt out of animations, ensuring immediate commits, which the View Transitions API cannot guarantee.
- This means that actions and event handlers don’t need to opt into view transitions explicitly, as they don’t know which elements will change or need transitions.
The “ Component:
- Think of as a container for animating child components. It wraps DOM nodes or components to apply view transitions, automatically assigning a view-transition-name for smoother animations.
- For example, using {condition ? : } creates a cross-fade effect between the two components, without triggering full exit/enter animations.
Managing Named Transitions:
- You can specify a custom name for a transition (e.g., “), which is helpful for animating elements across pages. However, it’s crucial to avoid name collisions by using unique identifiers.
- React manages when to activate or deactivate the transition, which prevents unintended animations from triggering when unrelated updates happen.
Heuristics for Activation:
- React activates a “ based on a set of heuristics:
- Enter/Exit Animations: Trigger when components enter/exit the viewport or when certain conditions change.
- Cross-Fading: Elements inside a “ can cross-fade if their content or size changes without affecting unrelated updates.
- Viewport Awareness: Only triggers transitions if the component is in the viewport, preventing unnecessary animations when elements are off-screen.
Avoiding Global Transitions:
- The biggest challenge is managing animations globally in complex apps, where unrelated changes could trigger animations across the entire document. React’s approach focuses on activating view transitions only when necessary, ensuring that local transitions are smooth without causing disruptions elsewhere.
Best Practices:
- Apply view-transition-name only right before the animation is needed to avoid unexpected effects.
- Namespace transition names and add IDs for unique transitions, especially when animating shared elements across pages or components.

What’s Next?

It’s probably too early to go in-depth into implementation details since a lot of this is, as I mentioned, experimental and subject to changes. But being on par with cutting-edge features and technologies such as the View Transition API will definitely improve your toolbox as a developer, so keep an eye out for it!

You can keep up with PR’s related to this on the following URL: https://github.com/facebook/react/pulls?q=is%3Apr+ViewTransition+is%3Aclosed