View transitions

A page that changes in a single frame

When you click a link or a tab on most pages, the old content is gone and the new content is there, from one frame to the next. For a small change, like a number, that's right. When a whole panel or page swaps, it's easy to lose your place: what moved, and where did it go? A short animation between the two, like a fade or a slide, shows the change.

Browsers have a built-in way to do this, the View Transition API. Here is a shop page with two buttons that do the same thing: switch between the teas and your cart. The result is live: click each button a few times and compare.

1const pages = {2  teas: "<h3>Teas</h3><p>Green tea, chai, mint tea.</p>",3  cart: "<h3>Your cart</h3><p>2 items: chai and mint tea. Total: $7</p>",4};5let current = "teas";6 7function switchPage() {8  current = current === "teas" ? "cart" : "teas";9  document.querySelector("#page").innerHTML = pages[current];10}11 12document.querySelector("#plain").addEventListener("click", switchPage);13 14document.querySelector("#animated").addEventListener("click", () => {15  if (!document.startViewTransition) return switchPage();16  document.startViewTransition(switchPage);17});

Lines 1 to 4 hold the two pages as HTML text. switchPage on lines 7 to 10 flips current and puts the other page into #page with innerHTML (the Modifying the document lesson covers it). Line 12 runs it straight from the Switch button: the page changes at once.

Line 16 is the new part. Switch with a view transition passes the same switchPage to document.startViewTransition, and the old page fades into the new one. Line 15 checks that the browser has the API first, and if it doesn't, just switches. The styles.css tab makes the fade last 0.8 seconds instead of the browser's 0.25, so it's easy to see. Its last rule turns the animation off for people who ask their system for less motion; more on that below.

Since React 19.3, React has a stable component for this, <ViewTransition>. Here is the same switch in React. Click both buttons again:

1import { ViewTransition, startTransition, useState } from "react";2 3const pages = {4  teas: { title: "Teas", text: "Green tea, chai, mint tea." },5  cart: { title: "Your cart", text: "2 items: chai and mint tea. Total: $7" },6};7 8export default function App() {9  const [current, setCurrent] = useState("teas");10  const next = current === "teas" ? "cart" : "teas";11  const page = pages[current];12 13  return (14    <>15      <button onClick={() => setCurrent(next)}>Switch</button>16      <button onClick={() => startTransition(() => setCurrent(next))}>17        Switch with a view transition18      </button>19      <ViewTransition>20        <section className="page">21          <h3>{page.title}</h3>22          <p>{page.text}</p>23        </section>24      </ViewTransition>25    </>26  );27}

Lines 19 to 24 wrap the page in <ViewTransition>, imported from react on line 1. Line 15's Switch sets the state directly, and the page changes at once. Line 16's button sets the same state inside startTransition, and the page fades. You never call startViewTransition yourself: React calls it when an update inside a startTransition changes something in a <ViewTransition>.

The browser's View Transition API

React's component is built on the browser's API, so it pays to see that first. document.startViewTransition takes one function, the update callback, which changes the page. It returns an object, a ViewTransition, with three promises for its steps. This card logs each step. Click Show details and read the console under the result:

1const card = document.querySelector("#card");2const button = document.querySelector("#toggle");3 4function update() {5  console.log("2. update runs. The old page is already a picture.");6  card.classList.toggle("open");7  button.textContent = card.classList.contains("open") ? "Hide details" : "Show details";8}9 10button.addEventListener("click", async () => {11  if (!document.startViewTransition) return update();12  const transition = document.startViewTransition(update);13  console.log("1. startViewTransition returned.");14  await transition.updateCallbackDone;15  console.log("3. updateCallbackDone: the page has changed.");16  await transition.ready;17  const animations = document.documentElement.getAnimations({ subtree: true });18  const parts = new Set(animations.map((animation) => animation.effect.pseudoElement));19  console.log("4. ready. Animating:", [...parts].join(", "));20  await transition.finished;21  console.log("5. finished. The pictures are gone.");22});

update on lines 4 to 8 opens or closes the card and changes the button's text. Line 11 is the check from the overview: without the API, it just runs update. Line 12 starts the view transition. Then the code waits for each promise with await. The console shows five lines, in this order:

1. 1. startViewTransition returned. Line 13 runs right after the call. The update hasn't run yet: the browser first takes a picture of the page as it is.
2. 2. update runs. A moment later the browser calls update (line 5), and the real page changes behind the picture.
3. 3. updateCallbackDone (line 15). The promise on line 14 resolves when the update has finished.
4. 4. ready. Animating: … (line 19). The ready promise on line 16 resolves when the animation is about to start. Lines 17 and 18 list every animation on the page, and their names, like ::view-transition-old(tea-card), are the parts the next section explains.
5. 5. finished. (line 21) The finished promise on line 20 resolves when the animation has ended and the pictures are gone.

The update must change the page before it returns (or before the promise it returns resolves), because the browser takes the new picture right after it. The object also has skipTransition(), which jumps to the end with no animation; the update still runs.

Browsers added the API at different times. In the table, the middle column is the version that first had document.startViewTransition(update). The last column is the version that first took an object, like this, which can carry types (you'll meet them later):

document.startViewTransition({
  update: switchPage,
  types: ["forward"],
});

How to read the table: each row is a browser, and each cell is the first version with that form of the call.

Every current version of the major browsers has both forms, and MDN marks view transitions in one page as Baseline, newly available since October 2025, when Firefox 144 shipped them. Older browsers are still out there, so keep the check on line 11: without the API the page simply changes with no animation, which is a fine fallback.

Pictures you can style with CSS

While a view transition runs, the browser puts its pictures in a tree of pseudo-elements on top of the page. A pseudo-element is a part of the page that CSS can style, but that isn't in your HTML, like ::before. The console line from step 4 named them. Each part of the page that animates on its own gets four:

• ::view-transition-group(name) moves and resizes from the old position and size to the new ones.
• ::view-transition-image-pair(name) holds the two pictures together.
• ::view-transition-old(name) is the picture from before the update. By default it fades out.
• ::view-transition-new(name) is the page after the update, live. By default it fades in.

The name comes from the CSS property view-transition-name. The whole page is named root by default. In the step-by-step example, the styles.css tab gives the card its own name on line 2: view-transition-name: tea-card. That's why the card grows into its new size instead of fading with the rest of the page. Lines 14 to 16 of that tab style its group: the move and resize take one second. Press Edit & run, open styles.css, change line 2 to view-transition-name: none, and click again: the card no longer grows on its own, and only the whole page fades.

Two rules come with names. A name may be on the page only once at a time, or the browser skips the whole transition. And a name is how the browser pairs the old and new picture of the same thing, which is what makes an element seem to move.

The animation runs in about a quarter of a second, too fast to read. The playground runs a real view transition on this page and stops it at its first frame, so you can drag it from start to end and see what the browser draws:

const transition = document.startViewTransition(() => {
  flushSync(() => setOpen(!open));
});

await transition.ready;
const animations = document.documentElement
  .getAnimations({ subtree: true })
  .filter((animation) => animation.effect.pseudoElement.includes("(tea-card)"));
for (const animation of animations) animation.pause();

// The slider: every animation jumps to the same point.
animation.currentTime = duration * (progress / 100);

At 0%, the old picture's opacity is 1 and the new picture's is 0. As you drag, one fades out while the other fades in, and the group's width grows from the small card to the big one. At 100%, only the new picture shows; let it finish, and the real card is back. The code beside it uses flushSync from react-dom inside the update, because the update must change the page before it returns, and a React set call alone would only ask for a render. That's fine for a demo, but React has a better way, next.

/* No animation for people who ask their system for less motion. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Line 2 is the media query that matches when the setting is on. Lines 3 to 5 select every view transition group and picture, with * for any name, and line 6 removes their animations.

React's ViewTransition component

In React you don't call startViewTransition or write view-transition-name. You wrap part of the page in <ViewTransition>, and React does both when that part changes in a transition. It became stable in React 19.3, released in September 2026, after a year as an experimental API; every example here runs React 19.3.1. Here are a tea's details that come and go. Click Show details and Hide details, and watch the console:

1import { ViewTransition, startTransition, useState } from "react";2import "./watchTransitions.js";3 4function Details() {5  return (6    <ViewTransition>7      <p className="card">Grown in Assam. Strong and malty. Best with milk.</p>8    </ViewTransition>9  );10}11 12export default function App() {13  const [open, setOpen] = useState(false);14 15  function toggle() {16    startTransition(() => setOpen(!open));17  }18 19  return (20    <>21      <h3>Assam black tea</h3>22      <button onClick={toggle}>{open ? "Hide details" : "Show details"}</button>23      {open && <Details />}24    </>25  );26}

Details on lines 4 to 10 returns its paragraph inside a <ViewTransition>. Line 16 flips open inside startTransition, and line 23 shows Details while open is true. The paragraph fades in and out, and the console prints View transition started. Types: none each time. That line comes from the watchTransitions.js tab, imported on line 2: it wraps document.startViewTransition to print a line whenever React calls it.

Only what's inside a <ViewTransition> animates. React turns off the browser's picture of the whole page, the part named root, so the heading and the button change at once and stay clickable while the paragraph fades.

Press Edit & run and change line 16 to setOpen(!open);, without startTransition. The paragraph now appears and goes at once, and the console stays quiet: React never called the API.

React picks one of four kinds of animation for each <ViewTransition>, by what happened to it in the transition. All four are a cross-fade unless you choose otherwise. How to read the table: the first column is the kind, the second when React uses it, and the third where you've seen it here.

An Activity counts too. When an <Activity> switches between visible and hidden in a transition, a <ViewTransition> at the top of it enters as it shows and exits as it hides, and the hidden part keeps its state.

Enter and exit have one rule. React only animates a <ViewTransition> that comes before any DOM element in the part of the page that was added or removed. If Details wrapped it in a <div>, like this, nothing would animate in or out, because the <div> is the first thing added:

function Details() {
  return (
    <div>
      <ViewTransition>
        <p className="card">Grown in Assam. Strong and malty. Best with milk.</p>
      </ViewTransition>
    </div>
  );
}

Line 3 is the <div> that comes first. React keeps this rule so that a small change deep inside a page doesn't make large parts of it animate by surprise. Exercise 2 lets you try it.

  } catch (x) {
    // We use the error as feature detection.
    // The only thing that should throw is if startViewTransition is missing
    // or if it doesn't accept the object form. Other errors are async.
    // I.e. it's before the View Transitions v2 spec. We only support View
    // Transitions v2 otherwise we fallback to not animating to ensure that
    // we're not animating with the wrong animation mapped.

Which updates animate

A plain set call is urgent: React shows it as soon as it can, and an animation would only get in the way. So React animates a <ViewTransition> only for updates that are allowed to take a moment. There are three:

• Updates in a transition: inside startTransition, or the startTransition that useTransition gives you (the Transitions lesson covers both).
• A Suspense reveal: a Suspense boundary swapping its fallback for its content.
• The background render where a deferred value catches up.

This example has all three kinds of update next to one <ViewTransition>. Try each one, and watch the console:

1import { ViewTransition, startTransition, useDeferredValue, useState } from "react";2import "./watchTransitions.js";3 4export default function App() {5  const [count, setCount] = useState(1);6  const [search, setSearch] = useState("");7  const deferredSearch = useDeferredValue(search);8 9  return (10    <>11      <button onClick={() => setCount(count + 1)}>Add one now</button>12      <button onClick={() => startTransition(() => setCount(count + 1))}>13        Add one in a transition14      </button>15      <input placeholder="Search teas" value={search} onChange={(event) => setSearch(event.target.value)} />16      <ViewTransition>17        <p className="card">18          {count} in the cart. Searching for: {deferredSearch || "nothing"}19        </p>20      </ViewTransition>21    </>22  );23}

• Add one now (line 11) sets the count directly. The number changes at once, and the console stays quiet.
• Add one in a transition (line 12) sets it inside startTransition. The paragraph cross-fades, and the console prints View transition started. Types: none.
• Type in Search teas. Line 15 sets search urgently, so the box shows your key at once. Line 7 gives a deferred copy, and line 18 shows that copy inside the <ViewTransition>. When it catches up, a moment later, the paragraph animates and the console prints a line.

A Suspense reveal animates too. Here the reviews come from a pretend server in the data.js tab, which answers after 1.5 seconds. Press Run again on the result to watch it again:

1import { Suspense, ViewTransition, use } from "react";2import { fetchReviews } from "./data.js";3import "./watchTransitions.js";4 5function Reviews() {6  const reviews = use(fetchReviews("assam"));7  return (8    <ul className="card">9      {reviews.map((review) => <li key={review}>{review}</li>)}10    </ul>11  );12}13 14export default function App() {15  return (16    <>17      <h3>Assam black tea</h3>18      <ViewTransition>19        <Suspense fallback={<p className="card">Loading reviews…</p>}>20          <Reviews />21        </Suspense>22      </ViewTransition>23    </>24  );25}

Line 6 reads the reviews with use, which suspends until they arrive. Lines 18 to 22 put the Suspense boundary inside a <ViewTransition>. First you see Loading reviews…. When the reviews arrive, React swaps the fallback for the list inside a view transition, so it fades instead of jumping, and the console prints a line. Because the <ViewTransition> wraps the whole boundary, React treats the swap as an update. A <ViewTransition> around the fallback and another around the content would make it an exit and an enter instead.

How to read the table: each row is an update next to a <ViewTransition>, whether React animates it, and why.

Your own animations: classes and types

A cross-fade suits most changes, but a carousel should slide: left when you go forward, right when you go back. React lets you name a CSS class for each kind of animation, with the props enter, exit, update, share, and default. React calls these View Transition Classes. And because both buttons make the same kind of change, you also tell React why the change happened, with addTransitionType, which became stable in React 19.3 together with <ViewTransition>. Press Next and Previous:

1import { ViewTransition, addTransitionType, startTransition, useState } from "react";2import "./watchTransitions.js";3 4const teas = ["Green tea", "Chai", "Mint tea", "Earl Grey"];5 6export default function App() {7  const [index, setIndex] = useState(0);8 9  function go(step, type) {10    startTransition(() => {11      addTransitionType(type);12      setIndex((index + step + teas.length) % teas.length);13    });14  }15 16  return (17    <>18      <button onClick={() => go(-1, "previous")}>Previous</button>19      <button onClick={() => go(1, "next")}>Next</button>20      <ViewTransition21        key={index}22        enter={{ next: "from-right", previous: "from-left" }}23        exit={{ next: "to-left", previous: "to-right" }}24      >25        <p className="slide">Tea of the day: {teas[index]}</p>26      </ViewTransition>27    </>28  );29}

go on lines 9 to 14 starts a transition. Line 11 calls addTransitionType(type) inside it, which labels the transition "next" or "previous"; the buttons on lines 18 and 19 pass the label. Line 21 gives the <ViewTransition> a key that changes with every slide, so React removes the old slide and adds a new one: an exit and an enter.

Lines 22 and 23 pick the classes. An object maps a type to a class: for a "next" transition the new slide gets from-right and the old one to-left, and for "previous" it's the other way round. The console prints the type each time, like View transition started. Types: previous.

The styles.css tab draws the slides. Lines 8 to 11 select the pictures by class, with a dot: ::view-transition-new(.from-right) is the new picture of any part that has the class from-right. Lines 13 to 16 are the keyframes: the old slide moves 60 pixels away and fades out, and the new one comes from the other side. Lines 19 to 25 are the reduced motion rule.

A few more things to know about classes:

• A plain string, like enter="slide-up", is used for every transition. "auto" is the browser's cross-fade, and "none" turns that kind off.
• In an object, a default key is used when no type matches. Without one, a type you didn't list gets the cross-fade.
• default="none" turns off every kind you don't name, so <ViewTransition default="none" enter="auto"> animates only when it's added.
• React also passes the types to the browser, so CSS can read them with :active-view-transition-type(next), and it has event props, like onEnter, for animating from JavaScript with element.animate().

One element moving between two screens

Shops often show a small photo in a list, and the same photo big on the details page. When you open the details, the photo can fly from its place in the list and grow into the big one. This is a shared element transition. Give the <ViewTransition> on both screens the same name. Click See details, then Back:

1import { ViewTransition, startTransition, useState } from "react";2import "./watchTransitions.js";3 4function Thumbnail({ onOpen }) {5  return (6    <div className="thumb">7      <ViewTransition name="assam-photo">8        <div className="photo small">Assam</div>9      </ViewTransition>10      <button onClick={onOpen}>See details</button>11    </div>12  );13}14 15function Details({ onClose }) {16  return (17    <article>18      <ViewTransition name="assam-photo">19        <div className="photo big">Assam</div>20      </ViewTransition>21      <p>Strong and malty. Best with milk.</p>22      <button onClick={onClose}>Back</button>23    </article>24  );25}26 27export default function App() {28  const [open, setOpen] = useState(false);29  const show = (value) => startTransition(() => setOpen(value));30 31  return open ? <Details onClose={() => show(false)} /> : <Thumbnail onOpen={() => show(true)} />;32}

Thumbnail (lines 4 to 13) shows the small photo, and Details (lines 15 to 25) the big one. Lines 7 and 18 give both photos the name assam-photo. Line 31 shows one screen or the other, and line 29 switches them in a transition. In that transition, one named <ViewTransition> is removed and another with the same name is added, so React pairs them for a share animation: the photo's group moves and resizes from the small box to the big one. The text and the buttons aren't in a <ViewTransition>, so they change at once.

Unlike enter and exit, a shared pair doesn't have to be at the top of what changed: line 18's is inside an <article>. Two rules apply:

• Use a name only for shared elements. Without one, React makes a unique name for each <ViewTransition>, which is what you want everywhere else.
• Each name once at a time. In a list, put the item's id in the name, like photo-assam. Two with the same name on the page make React log an error in development, and the browser can't run the transition.

Also, if either photo is outside the visible part of the page, React doesn't pair them, so a photo never flies in from far off screen.

A tea shop with animated pages

Here is everything together: a list of three teas and a details page. Each photo flies to the details page and back, the transitions carry a type for the direction, and adding to the cart stays instant. Click a photo, Add to cart, and Back:

1import { ViewTransition, addTransitionType, startTransition, useState } from "react";2import "./watchTransitions.js";3 4const teas = [5  { id: "assam", name: "Assam", color: "", note: "Strong and malty." },6  { id: "sencha", name: "Sencha", color: "green", note: "Fresh and grassy." },7  { id: "mint", name: "Mint", color: "mint", note: "Cool and sweet." },8];9 10function Photo({ tea, size }) {11  return (12    <ViewTransition name={`photo-${tea.id}`}>13      <div className={`photo ${size} ${tea.color}`}>{tea.name}</div>14    </ViewTransition>15  );16}17 18export default function App() {19  const [openId, setOpenId] = useState(null);20  const [cart, setCart] = useState(0);21  const open = teas.find((tea) => tea.id === openId);22 23  function go(id, type) {24    startTransition(() => {25      addTransitionType(type);26      setOpenId(id);27    });28  }29 30  return (31    <>32      <p>Cart: {cart}</p>33      {open ? (34        <article>35          <Photo tea={open} size="big" />36          <p>{open.note}</p>37          <button onClick={() => setCart(cart + 1)}>Add to cart</button>38          <button onClick={() => go(null, "back")}>Back</button>39        </article>40      ) : (41        <div className="grid">42          {teas.map((tea) => (43            <button key={tea.id} aria-label={tea.name} onClick={() => go(tea.id, "forward")}>44              <Photo tea={tea} size="small" />45            </button>46          ))}47        </div>48      )}49    </>50  );51}

Photo on lines 10 to 16 wraps every photo in a <ViewTransition> named after its tea, on line 12: photo-assam, photo-sencha, photo-mint. The list on lines 41 to 47 uses it small, and the details page on line 35 big. go (lines 23 to 28) opens or closes a tea in a transition, labelled "forward" or "back" on lines 43 and 38, and the console prints the type each time.

Line 37's Add to cart is urgent on purpose: the count on line 32 changes at once, and the console stays quiet. A cart count should never wait for an animation. The types aren't used by any class yet; in exercise 5 you use them the way the carousel does.

Common mix-ups

• "A ViewTransition animates every change inside it." No. It animates only updates in a transition, a Suspense reveal, or a deferred value catching up. A plain set call shows at once.
• "I should call document.startViewTransition in my React code." No. React calls it for you, and a transition started by someone else on the page is interrupted by React's. Use <ViewTransition> and startTransition.
• "The browser animates my real elements." No. It animates pictures of them, in pseudo-elements on top of the page. The real page changes at once, underneath.
• "Every ViewTransition needs a name." No. React makes unique names itself. Give a name only to pair two of them for a shared element, and keep each name unique on the page.
• "People who prefer less motion won't see the animation." Only if you add the prefers-reduced-motion rule. Neither React nor the browser does it for you.
• "Old browsers will break." No. Where the API is missing, React applies the update with no animation, and the page works as before.

Practice exercises

Each exercise shows its result under the code, or when you press Edit & run. Watch the console: a View transition started line means React animated. Try a guess first, then use the hints.

import { ViewTransition, useState } from "react";
import "./watchTransitions.js";

export default function App() {
  const [count, setCount] = useState(1);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Add one</button>
      <ViewTransition>
        <p className="card">{count} in the cart</p>
      </ViewTransition>
    </>
  );
}

1import { ViewTransition, useState } from "react";2import "./watchTransitions.js";3 4export default function App() {5  const [count, setCount] = useState(1);6 7  return (8    <>9      <button onClick={() => setCount(count + 1)}>Add one</button>10      <ViewTransition>11        <p className="card">{count} in the cart</p>12      </ViewTransition>13    </>14  );15}

1import { ViewTransition, startTransition, useState } from "react";2import "./watchTransitions.js";3 4function Details() {5  return (6    <div>7      <ViewTransition>8        <p className="card">Grown in Assam. Strong and malty. Best with milk.</p>9      </ViewTransition>10    </div>11  );12}13 14export default function App() {15  const [open, setOpen] = useState(false);16 17  function toggle() {18    startTransition(() => setOpen(!open));19  }20 21  return (22    <>23      <h3>Assam black tea</h3>24      <button onClick={toggle}>{open ? "Hide details" : "Show details"}</button>25      {open && <Details />}26    </>27  );28}

1import { ViewTransition, startTransition, useState } from "react";2import "./watchTransitions.js";3 4function Details() {5  return (6    <ViewTransition>7      <p className="card">Grown in Assam. Strong and malty. Best with milk.</p>8    </ViewTransition>9  );10}11 12export default function App() {13  const [open, setOpen] = useState(false);14 15  function toggle() {16    startTransition(() => setOpen(!open));17  }18 19  return (20    <>21      <h3>Assam black tea</h3>22      <button onClick={toggle}>{open ? "Hide details" : "Show details"}</button>23      {open && <Details />}24    </>25  );26}

1function switchSale() {2  const price = document.querySelector("#price");3  price.textContent = price.textContent === "$4" ? "Sale: $3" : "$4";4}5 6document.querySelector("#sale").addEventListener("click", switchSale);

1function switchSale() {2  const price = document.querySelector("#price");3  price.textContent = price.textContent === "$4" ? "Sale: $3" : "$4";4}5 6document.querySelector("#sale").addEventListener("click", () => {7  if (!document.startViewTransition) return switchSale();8  document.startViewTransition(switchSale);9});

1import { ViewTransition, startTransition, useState } from "react";2import "./watchTransitions.js";3 4function Details() {5  return (6    <ViewTransition>7      <p className="card">Grown in Assam. Strong and malty. Best with milk.</p>8    </ViewTransition>9  );10}11 12export default function App() {13  const [open, setOpen] = useState(false);14 15  function toggle() {16    startTransition(() => setOpen(!open));17  }18 19  return (20    <>21      <h3>Assam black tea</h3>22      <button onClick={toggle}>{open ? "Hide details" : "Show details"}</button>23      {open && <Details />}24    </>25  );26}

1import { ViewTransition, startTransition, useState } from "react";2import "./watchTransitions.js";3 4function Details() {5  return (6    <ViewTransition>7      <p className="card">Grown in Assam. Strong and malty. Best with milk.</p>8    </ViewTransition>9  );10}11 12export default function App() {13  const [open, setOpen] = useState(false);14 15  function toggle() {16    startTransition(() => setOpen(!open));17  }18 19  return (20    <>21      <h3>Assam black tea</h3>22      <button onClick={toggle}>{open ? "Hide details" : "Show details"}</button>23      {open && <Details />}24    </>25  );26}

1import { ViewTransition, startTransition, useState } from "react";2import "./watchTransitions.js";3 4const teas = ["Green tea", "Chai", "Mint tea", "Earl Grey"];5 6export default function App() {7  const [index, setIndex] = useState(0);8 9  function go(step) {10    startTransition(() => {11      setIndex((index + step + teas.length) % teas.length);12    });13  }14 15  return (16    <>17      <button onClick={() => go(-1)}>Previous</button>18      <button onClick={() => go(1)}>Next</button>19      <ViewTransition key={index} enter="from-right" exit="to-left">20        <p className="slide">Tea of the day: {teas[index]}</p>21      </ViewTransition>22    </>23  );24}

1import { ViewTransition, addTransitionType, startTransition, useState } from "react";2import "./watchTransitions.js";3 4const teas = ["Green tea", "Chai", "Mint tea", "Earl Grey"];5 6export default function App() {7  const [index, setIndex] = useState(0);8 9  function go(step, type) {10    startTransition(() => {11      addTransitionType(type);12      setIndex((index + step + teas.length) % teas.length);13    });14  }15 16  return (17    <>18      <button onClick={() => go(-1, "previous")}>Previous</button>19      <button onClick={() => go(1, "next")}>Next</button>20      <ViewTransition21        key={index}22        enter={{ next: "from-right", previous: "from-left" }}23        exit={{ next: "to-left", previous: "to-right" }}24      >25        <p className="slide">Tea of the day: {teas[index]}</p>26      </ViewTransition>27    </>28  );29}

1import { ViewTransition, addTransitionType, startTransition, useState } from "react";2import "./watchTransitions.js";3 4const teas = [5  { id: "assam", name: "Assam", color: "", note: "Strong and malty." },6  { id: "sencha", name: "Sencha", color: "green", note: "Fresh and grassy." },7  { id: "mint", name: "Mint", color: "mint", note: "Cool and sweet." },8];9 10function Photo({ tea, size }) {11  return (12    <ViewTransition name="photo">13      <div className={`photo ${size} ${tea.color}`}>{tea.name}</div>14    </ViewTransition>15  );16}17 18export default function App() {19  const [openId, setOpenId] = useState(null);20  const [cart, setCart] = useState(0);21  const open = teas.find((tea) => tea.id === openId);22 23  function go(id, type) {24    startTransition(() => {25      addTransitionType(type);26      setOpenId(id);27    });28  }29 30  return (31    <>32      <p>Cart: {cart}</p>33      {open ? (34        <article>35          <Photo tea={open} size="big" />36          <p>{open.note}</p>37          <button onClick={() => setCart(cart + 1)}>Add to cart</button>38          <button onClick={() => go(null, "back")}>Back</button>39        </article>40      ) : (41        <div className="grid">42          {teas.map((tea) => (43            <button key={tea.id} aria-label={tea.name} onClick={() => go(tea.id, "forward")}>44              <Photo tea={tea} size="small" />45            </button>46          ))}47        </div>48      )}49    </>50  );51}

1import { ViewTransition, addTransitionType, startTransition, useState } from "react";2import "./watchTransitions.js";3 4const teas = [5  { id: "assam", name: "Assam", color: "", note: "Strong and malty." },6  { id: "sencha", name: "Sencha", color: "green", note: "Fresh and grassy." },7  { id: "mint", name: "Mint", color: "mint", note: "Cool and sweet." },8];9 10function Photo({ tea, size }) {11  return (12    <ViewTransition name={`photo-${tea.id}`}>13      <div className={`photo ${size} ${tea.color}`}>{tea.name}</div>14    </ViewTransition>15  );16}17 18export default function App() {19  const [openId, setOpenId] = useState(null);20  const [cart, setCart] = useState(0);21  const open = teas.find((tea) => tea.id === openId);22 23  function go(id, type) {24    startTransition(() => {25      addTransitionType(type);26      setOpenId(id);27    });28  }29 30  return (31    <>32      <p>Cart: {cart}</p>33      {open ? (34        <article>35          <Photo tea={open} size="big" />36          <p>{open.note}</p>37          <button onClick={() => setCart(cart + 1)}>Add to cart</button>38          <button onClick={() => go(null, "back")}>Back</button>39        </article>40      ) : (41        <div className="grid">42          {teas.map((tea) => (43            <button key={tea.id} aria-label={tea.name} onClick={() => go(tea.id, "forward")}>44              <Photo tea={tea} size="small" />45            </button>46          ))}47        </div>48      )}49    </>50  );51}

Check your understanding

For each React question, ask two things: is the update in a transition, a Suspense reveal, or a deferred value? And where does the <ViewTransition> sit?

Key takeaways

• document.startViewTransition(update) takes a picture of the page, runs your update, and animates from the old picture to the new page. Its promises, updateCallbackDone, ready, and finished, follow the steps.
• The animation is a tree of pseudo-elements: a group per name, with an old and a new picture. view-transition-name names a part, and CSS styles the pseudo-elements.
• In React 19.3 and later, wrap part of the page in <ViewTransition>. React animates it only for transitions, Suspense reveals, and deferred values catching up, and never for urgent updates.
• React picks enter, exit, update, or share. Choose your own classes with props, pick them by cause with addTransitionType, and pair two screens with a unique name.
• Always add a prefers-reduced-motion rule, and keep a fallback for browsers without the API.

Coming next: When React re-renders. It opens the Performance stage: what makes a component render again, and when that costs something.