Reacts New ViewTransition Component Is A Little Flakey

Key Concepts

• View Transitions API: A browser feature for creating smooth transitions between different states of a web page.
• React's Experimental View Transition Component: A new React component (unstable_ViewTransition) designed to simplify the use of the View Transitions API.
• useTransition Hook: A React hook used to manage and trigger transitions.
• startTransition Function: A function returned by useTransition that wraps state updates to enable transitions.
• flushSync Function: A function from react-dom that ensures the DOM is fully updated before a view transition completes.
• View Transition Names: Unique identifiers assigned to elements to enable specific animations during view transitions.
• Heuristics: Built-in rules or algorithms used by the View Transitions API to automatically handle certain transition scenarios.
• Next.js 15.2: A version of the Next.js framework that includes experimental support for React's View Transition Component.
• TanStack Router: A routing library for React that offers built-in support for View Transitions.
• view-transition-name CSS Property: A CSS property used to assign a view transition name to an element.
• ::view-transition-new() and ::view-transition-old() Pseudo-elements: CSS pseudo-elements that allow styling and animating elements during a view transition.

Exploring React's Experimental View Transition Component

The video begins by introducing React's new experimental View Transition component, designed to simplify the use of the browser's native View Transitions API. The presenter emphasizes that this component is currently in an experimental phase and requires upgrading to React 19.

Simple Demo: vtw-demo

A basic demo (vtw-demo) is presented, showcasing a guitar image that jumps between different positions on the screen upon clicking. The initial implementation is jerky, highlighting the need for smooth transitions.

Code Snippet:

• An array of positions is used to define the guitar's location.
• Clicking cycles through these positions, updating the image's transform style.

Implementing View Transitions with the Experimental Component

The presenter demonstrates how to use the unstable_ViewTransition component to add smooth transitions.

Steps:

1. Upgrade React: Update the react dependency in package.json to the experimental branch (19.0.0-experimental).
2. Import unstable_ViewTransition: Import the component from react and rename it to ViewTransition.

   import { unstable_ViewTransition as ViewTransition, useTransition } from 'react';
   

3. Wrap the Image: Wrap the guitar image with the ViewTransition component.

   <ViewTransition>
     <img src="..." style={{ transform: position }} />
   </ViewTransition>
   

4. Use useTransition Hook: Import and invoke the useTransition hook.

   const [isPending, startTransition] = useTransition();
   

5. Wrap State Updates with startTransition: Use the startTransition function to wrap the setPosition call.

   startTransition(() => {
     setPosition(newPosition);
   });
   

Using the Native View Transitions API

The presenter then demonstrates how to achieve similar results using the browser's native View Transitions API directly.

Steps:

1. Use document.startViewTransition: Call document.startViewTransition with a function that updates the DOM.

   document.startViewTransition(() => {
     setPosition(newPosition);
   });
   

2. Ensure DOM Updates with flushSync: Wrap the state update with flushSync from react-dom to ensure the DOM is fully updated before the transition completes.

   import { flushSync } from 'react-dom';
   
   document.startViewTransition(() => {
     flushSync(() => {
       setPosition(newPosition);
     });
   });
   

View Transition Names for Specific Animations

To achieve more complex animations, such as animating the guitar's position and rotation, the presenter introduces the concept of view transition names.

Steps:

1. Assign a view-transition-name: Add the view-transition-name CSS property to the guitar image.

   <img
     src="..."
     style={{ transform: position, viewTransitionName: 'guitar' }}
   />
   

View Transitions in Next.js 15.2

The video then explores how to use the experimental View Transition component within Next.js 15.2.

Next.js Specifics

• Experimental React Version: Next.js 15.2 includes an experimental version of React with the View Transition component, even if React 19 isn't fully released. This version is used in React Server Components (RSC).
• Enable View Transitions: Enable the viewTransitions experimental flag in next.config.js.

  module.exports = {
    experimental: {
      viewTransitions: true,
    },
  };
  

Hero Image Transition

The presenter demonstrates a hero image transition, where a small guitar image on the index page smoothly transitions to a larger image on the detail page.

Implementation:

• Templated View Transition Names: Use a templated view transition name based on the guitar's ID to ensure the correct image is animated.

  <img
    src="..."
    style={{ viewTransitionName: `guitar-${guitar.id}` }}
  />
  

• Inconsistency Issues: The presenter notes that the View Transitions API in Next.js 15.2 can be inconsistent, sometimes working and sometimes not. This is attributed to the heuristics built into the API.

View Transitions with TanStack Router

The video then explores using View Transitions with TanStack Router, highlighting its more reliable and predictable behavior.

TanStack Router Implementation

1. Enable Default View Transitions: Enable default view transitions in the TanStack Router configuration.

   const router = createBrowserRouter({
     // ... other options
     defaultViewTransition: true,
   });
   

2. Add View Transition Names: Add the view-transition-name CSS property to the guitar images on both the index and detail pages.

Custom Animations with CSS Pseudo-elements

The presenter demonstrates how to create custom animations using the ::view-transition-new() and ::view-transition-old() pseudo-elements.

Steps:

1. Add View Transition Name to Description: Add a view-transition-name to the description element on the detail page.

   <p style={{ viewTransitionName: 'description' }}>...</p>
   

2. Define CSS Animations: Define CSS animations for sliding in and sliding out.

   @keyframes slide-in {
     from {
       transform: translateY(20px);
       opacity: 0;
     }
     to {
       transform: translateY(0);
       opacity: 1;
     }
   }
   
   @keyframes slide-out {
     from {
       transform: translateY(0);
       opacity: 1;
     }
     to {
       transform: translateY(20px);
       opacity: 0;
     }
   }
   

3. Apply Animations to Pseudo-elements: Use the ::view-transition-new() and ::view-transition-old() pseudo-elements to apply the animations.

   ::view-transition-new(description) {
     animation: slide-in 0.5s ease-out;
   }
   
   ::view-transition-old(description) {
     animation: slide-out 0.5s ease-in;
   }
   

Conclusion

The video concludes by summarizing the two approaches to implementing View Transitions in React: using the experimental React component and using TanStack Router's built-in support. The presenter recommends experimenting with both and encourages viewers to leave questions and comments. TanStack Router is presented as the more reliable option currently, while the React experimental component offers potential for future improvements.