View transitions

When a filter changes, cards vanish and others jump into their place in a single frame. It works, but the eye loses track of what moved. A short animation helps people see what changed.

Animating elements that are being added or removed used to be hard in React, because a removed element is gone from the DOM before you can animate it. Modern browsers have a View Transition API that solves this. The browser takes a picture of the page before a change and another after it, then animates between the two. React 19.3 makes this API available as a component, <ViewTransition>, so you don't have to coordinate the timing yourself.

Your first view transitionCopy Anchor Link

Wrap the part you want to animate in <ViewTransition>, then make the change inside startTransition. Click both buttons and compare.

The first button cross-fades the card in and out. The second one makes it pop in and out with no animation. The component is the same; the only difference is how the state was updated.

That's the most important rule of this lesson. <ViewTransition> only animates updates that happen inside a Transition: a startTransition call, a form Action, a useDeferredValue update, or Suspense revealing content. A normal setState is urgent, and React shows urgent changes right away, without waiting for an animation.

React decides what kind of animation to run by looking at what happened to the <ViewTransition>:

For each one, the default animation is a cross-fade.

Animating a listCopy Anchor Link

To animate each item of a list separately, wrap each item in its own <ViewTransition> and move the key from the item onto the <ViewTransition>. The key tells React which item is which, so it knows which ones entered, which ones left and which ones only moved.

Cards that leave the filter fade out, new ones fade in, and the cards that stay slide to their new positions. You didn't write any code for the sliding: the browser sees that the same <ViewTransition> is in a different place and animates the move.

Custom animations with View Transition ClassesCopy Anchor Link

A cross-fade is a sensible default. To design your own animation, give the trigger a class name, and then style it in CSS with the browser's view transition pseudo-elements:

<ViewTransition enter="slide-in" exit="slide-out">

When this <ViewTransition> enters, React gives it the View Transition Class slide-in. In CSS, ::view-transition-new(.slide-in) is the "after" picture of an entering element, and ::view-transition-old(.slide-out) is the "before" picture of a leaving one.

New books slide in from the left, and removed books slide out to the right. In the prop you write the class name without a dot (enter="slide-in"). In the CSS selector you write it with one: (.slide-in).

Each trigger prop accepts:

• a class name, as above;
• "auto" for the browser's default cross-fade;
• "none" to turn that animation off.

There's also a default prop for every trigger you don't set. For example, default="none" enter="auto" animates only entering, and nothing else.

Different animations with addTransitionTypeCopy Anchor Link

Sometimes the same state change should animate differently depending on why it happened. A carousel's Next and Previous buttons both change the slide number, but Next should slide to the left and Previous to the right. addTransitionType labels a Transition so <ViewTransition> can choose:

startTransition(() => {
  addTransitionType('next');
  setIndex(index + 1);
});

Then pass an object to the trigger prop, mapping each type to a class:

Two details are worth noticing:

• key={index} on the <ViewTransition> makes React treat each slide as a new element. The old slide exits and the new one enters, so you can animate them in opposite directions.
• default: 'auto' inside the object handles Transitions with no type, for example the first render, by using the normal cross-fade.

Routers use the same idea for back and forward navigation, so pages slide the right way.

// In the list
<ViewTransition name={`cover-${book.id}`}>
  <img src={book.cover} className="thumbnail" alt="" />
</ViewTransition>

// On the detail page
<ViewTransition name={`cover-${book.id}`}>
  <img src={book.cover} className="large-cover" alt={book.title} />
</ViewTransition>

<ViewTransition update="auto" default="none">
  <Suspense fallback={<DetailsSkeleton />}>
    <BookExtras id={id} />
  </Suspense>
</ViewTransition>

import { ViewTransition, startTransition, useState } from 'react';

const initialBooks = [
  { id: '1', title: 'The Hobbit' },
  { id: '2', title: 'Dune' },
  { id: '3', title: 'Circe' },
  { id: '4', title: 'Piranesi' },
];

export default function App() {
  const [books, setBooks] = useState(initialBooks);

  function handleDelete(id) {
    startTransition(() => {
      setBooks(books.filter((book) => book.id !== id));
    });
  }

  return (
    <ul className="list">
      {books.map((book) => (
        <ViewTransition key={book.id} exit="shrink-out">
          <li>
            {book.title}
            <button onClick={() => handleDelete(book.id)}>Delete</button>
          </li>
        </ViewTransition>
      ))}
    </ul>
  );
}

.list { list-style: none; padding: 0; display: grid; gap: 6px; max-width: 320px; }
.list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 8px; }

::view-transition-old(.shrink-out) {
  animation: 300ms ease-in both shrink-out;
}

@keyframes shrink-out {
  to { opacity: 0; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(.shrink-out) { animation: none; }
}