From 526c851a1458d1776408213241b21b1b46b1139b Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@meta.com>
Date: Fri, 13 Feb 2026 21:17:17 -0500
Subject: [PATCH 1/6] Expand ViewTransition callback props reference
 documentation

Document the full callback signatures with ViewTransitionInstance
and types arguments, cleanup function return values, instance
properties (group, imagePair, old, new), and per-callback behavior.
---
 src/content/reference/react/ViewTransition.md | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index 9f451eddc9d..d7de2026822 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -84,16 +84,38 @@ By default, `<ViewTransition>` animates with a smooth cross-fade. You can custom
 
 #### Callback {/*events*/}
 
-These callbacks allow you to adjust the animation imperatively using the [animate](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) APIs:
+These callbacks allow you to control the animation imperatively using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). React calls them after the View Transition's [`ready`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/ready) Promise resolves, once built-in default animations have already been computed. Only one callback fires per `<ViewTransition>` per Transition.
 
-* **optional** `onEnter`: A function. React calls `onEnter` after an "enter" animation.
-* **optional** `onExit`: A function. React calls `onExit` after an "exit" animation.
-* **optional** `onShare`:  A function. React calls `onShare` after a "share" animation.
-* **optional** `onUpdate`:  A function. React calls `onUpdate` after an "update" animation.
+* **optional** `onEnter`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` is inserted during a Transition without a matching named pair. Use this to animate the entering element imperatively.
+* **optional** `onExit`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` is removed during a Transition without a matching named pair. Use this to animate the exiting element imperatively.
+* **optional** `onShare`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` is part of a shared element Transition—where a named `<ViewTransition>` is deleted and another with the same name is inserted. Takes precedence over `onEnter` and `onExit`. Use this to animate the shared element Transition imperatively.
+* **optional** `onUpdate`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` has DOM mutations inside it, or when the boundary itself changes size or position due to a sibling change. Use this to animate content updates imperatively.
 
-Each callback receives as arguments:
-- `element`: The DOM element that was animated.
-- `types`: The [Transition Types](/reference/react/addTransitionType) included in the animation.
+Each callback receives two arguments:
+
+* `instance`: A View Transition instance object that provides access to the view transition [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_process). Call `instance.old.animate(keyframes, options)` and `instance.new.animate(keyframes, options)` to imperatively control the animation. The instance has these properties:
+  * `name`: The `view-transition-name` string for this boundary.
+  * `group`: The `::view-transition-group` pseudo-element. Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
+  * `imagePair`: The `::view-transition-image-pair` pseudo-element. Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
+  * `old`: The `::view-transition-old` pseudo-element (the snapshot of the previous state). Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
+  * `new`: The `::view-transition-new` pseudo-element (the live representation of the new state). Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
+* `types`: An `Array<string>` of [Transition Types](/reference/react/addTransitionType) included in the animation. Empty array if no types were specified.
+
+Each callback can optionally return a **cleanup function**. The cleanup function is called when the View Transition finishes, allowing you to cancel any manually started animations:
+
+```js
+<ViewTransition
+  onEnter={(instance, types) => {
+    const anim = instance.new.animate(
+      [{ opacity: 0 }, { opacity: 1 }],
+      { duration: 500 }
+    );
+    return () => anim.cancel();
+  }}
+>
+  <div>...</div>
+</ViewTransition>
+```
 
 ### View Transition Class {/*view-transition-class*/}
 

From ddad7476b89c48da3f534a9ba67f39ba64693ab9 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@meta.com>
Date: Fri, 13 Feb 2026 21:18:43 -0500
Subject: [PATCH 2/6] Add usage section for imperative animations with
 ViewTransition callbacks

Add "Animating imperatively with callbacks" usage section with Sandpack
example showing onEnter/onExit with instance.new.animate() and cleanup
functions. Includes addTransitionType integration example.
---
 src/content/reference/react/ViewTransition.md | 677 +++++++++++-------
 1 file changed, 434 insertions(+), 243 deletions(-)

diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index d7de2026822..f84726ccf78 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -5,7 +5,7 @@ version: canary
 
 <Canary>
 
-**The `<ViewTransition />` API is currently only available in React’s Canary and Experimental channels.** 
+**The `<ViewTransition />` API is currently only available in React’s Canary and Experimental channels.**
 
 [Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
 
@@ -15,13 +15,12 @@ version: canary
 
 `<ViewTransition>` lets you animate elements that update inside a Transition.
 
-
 ```js
 import {ViewTransition} from 'react';
 
 <ViewTransition>
   <div>...</div>
-</ViewTransition>
+</ViewTransition>;
 ```
 
 </Intro>
@@ -30,9 +29,9 @@ import {ViewTransition} from 'react';
 
 ---
 
-## Reference {/*reference*/}
+## Reference {/* reference */}
 
-### `<ViewTransition>` {/*viewtransition*/}
+### `<ViewTransition>` {/* viewtransition */}
 
 Wrap elements in `<ViewTransition>` to animate them when they update inside a [Transition](/reference/react/useTransition). React uses the following heuristics to determine if a View Transition activates for an animation:
 
@@ -41,11 +40,11 @@ Wrap elements in `<ViewTransition>` to animate them when they update inside a [T
 - `update`: If a `ViewTransition` has any DOM mutations inside it that React is doing (such as a prop changing) or if the `ViewTransition` boundary itself changes size or position due to an immediate sibling. If there are nested` ViewTransition` then the mutation applies to them and not the parent.
 - `share`: If a named `ViewTransition` is inside a deleted subtree and another named `ViewTransition` with the same name is part of an inserted subtree in the same Transition, they form a Shared Element Transition, and it animates from the deleted one to the inserted one.
 
-By default, `<ViewTransition>` animates with a smooth cross-fade (the browser default view transition). You can customize the animation by providing a [View Transition Class](#view-transition-class) to the `<ViewTransition>` component. You can  customize animations for each kind of trigger (see [Styling View Transitions](#styling-view-transitions)).
+By default, `<ViewTransition>` animates with a smooth cross-fade (the browser default view transition). You can customize the animation by providing a [View Transition Class](#view-transition-class) to the `<ViewTransition>` component. You can customize animations for each kind of trigger (see [Styling View Transitions](#styling-view-transitions)).
 
 <DeepDive>
 
-#### How does `<ViewTransition>` work? {/*how-does-viewtransition-work*/}
+#### How does `<ViewTransition>` work? {/* how-does-viewtransition-work */}
 
 Under the hood, React applies `view-transition-name` to inline styles of the nearest DOM node nested inside the `<ViewTransition>` component. If there are multiple sibling DOM nodes like `<ViewTransition><div /><div /></ViewTransition>` then React adds a suffix to the name to make each unique but conceptually they're part of the same one. React doesn't apply these eagerly but only at the time that boundary should participate in an animation.
 
@@ -71,61 +70,60 @@ After the finished Promise of the `startViewTransition` is resolved, React will
 
 </DeepDive>
 
-#### Props {/*props*/}
+#### Props {/* props */}
 
 By default, `<ViewTransition>` animates with a smooth cross-fade. You can customize the animation, or specify a shared element transition, with these props:
 
-* **optional** `enter`: A string or object. The [View Transition Class](#view-transition-class) to apply when enter is activated.
-* **optional** `exit`: A string or object. The [View Transition Class](#view-transition-class) to apply when exit is activated.
-* **optional** `update`: A string or object. The [View Transition Class](#view-transition-class) to apply when an update is activated.
-* **optional** `share`: A string or object. The [View Transition Class](#view-transition-class) to apply when a shared element is activated.
-* **optional** `default`: A string or object. The [View Transition Class](#view-transition-class) used when no other matching activation prop is found. 
-* **optional** `name`: A string or object. The name of the View Transition used for shared element transitions. If not provided, React will use a unique name for each View Transition to prevent unexpected animations.
+- **optional** `enter`: A string or object. The [View Transition Class](#view-transition-class) to apply when enter is activated.
+- **optional** `exit`: A string or object. The [View Transition Class](#view-transition-class) to apply when exit is activated.
+- **optional** `update`: A string or object. The [View Transition Class](#view-transition-class) to apply when an update is activated.
+- **optional** `share`: A string or object. The [View Transition Class](#view-transition-class) to apply when a shared element is activated.
+- **optional** `default`: A string or object. The [View Transition Class](#view-transition-class) used when no other matching activation prop is found.
+- **optional** `name`: A string or object. The name of the View Transition used for shared element transitions. If not provided, React will use a unique name for each View Transition to prevent unexpected animations.
 
-#### Callback {/*events*/}
+#### Callback {/* events */}
 
 These callbacks allow you to control the animation imperatively using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). React calls them after the View Transition's [`ready`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/ready) Promise resolves, once built-in default animations have already been computed. Only one callback fires per `<ViewTransition>` per Transition.
 
-* **optional** `onEnter`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` is inserted during a Transition without a matching named pair. Use this to animate the entering element imperatively.
-* **optional** `onExit`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` is removed during a Transition without a matching named pair. Use this to animate the exiting element imperatively.
-* **optional** `onShare`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` is part of a shared element Transition—where a named `<ViewTransition>` is deleted and another with the same name is inserted. Takes precedence over `onEnter` and `onExit`. Use this to animate the shared element Transition imperatively.
-* **optional** `onUpdate`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` has DOM mutations inside it, or when the boundary itself changes size or position due to a sibling change. Use this to animate content updates imperatively.
+- **optional** `onEnter`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` is inserted during a Transition without a matching named pair. Use this to animate the entering element imperatively.
+- **optional** `onExit`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` is removed during a Transition without a matching named pair. Use this to animate the exiting element imperatively.
+- **optional** `onShare`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` is part of a shared element Transition—where a named `<ViewTransition>` is deleted and another with the same name is inserted. Takes precedence over `onEnter` and `onExit`. Use this to animate the shared element Transition imperatively.
+- **optional** `onUpdate`: `(instance, types) => void | (() => void)`. Called when this `<ViewTransition>` has DOM mutations inside it, or when the boundary itself changes size or position due to a sibling change. Use this to animate content updates imperatively.
 
 Each callback receives two arguments:
 
-* `instance`: A View Transition instance object that provides access to the view transition [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_process). Call `instance.old.animate(keyframes, options)` and `instance.new.animate(keyframes, options)` to imperatively control the animation. The instance has these properties:
-  * `name`: The `view-transition-name` string for this boundary.
-  * `group`: The `::view-transition-group` pseudo-element. Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
-  * `imagePair`: The `::view-transition-image-pair` pseudo-element. Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
-  * `old`: The `::view-transition-old` pseudo-element (the snapshot of the previous state). Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
-  * `new`: The `::view-transition-new` pseudo-element (the live representation of the new state). Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
-* `types`: An `Array<string>` of [Transition Types](/reference/react/addTransitionType) included in the animation. Empty array if no types were specified.
+- `instance`: A View Transition instance object that provides access to the view transition [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_process). Call `instance.old.animate(keyframes, options)` and `instance.new.animate(keyframes, options)` to imperatively control the animation. The instance has these properties:
+  - `name`: The `view-transition-name` string for this boundary.
+  - `group`: The `::view-transition-group` pseudo-element. Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
+  - `imagePair`: The `::view-transition-image-pair` pseudo-element. Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
+  - `old`: The `::view-transition-old` pseudo-element (the snapshot of the previous state). Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
+  - `new`: The `::view-transition-new` pseudo-element (the live representation of the new state). Supports `.animate()`, `.getAnimations()`, and `.getComputedStyle()`.
+- `types`: An `Array<string>` of [Transition Types](/reference/react/addTransitionType) included in the animation. Empty array if no types were specified.
 
 Each callback can optionally return a **cleanup function**. The cleanup function is called when the View Transition finishes, allowing you to cancel any manually started animations:
 
 ```js
 <ViewTransition
   onEnter={(instance, types) => {
-    const anim = instance.new.animate(
-      [{ opacity: 0 }, { opacity: 1 }],
-      { duration: 500 }
-    );
+    const anim = instance.new.animate([{opacity: 0}, {opacity: 1}], {
+      duration: 500,
+    });
     return () => anim.cancel();
-  }}
->
+  }}>
   <div>...</div>
 </ViewTransition>
 ```
 
-### View Transition Class {/*view-transition-class*/}
+### View Transition Class {/* view-transition-class */}
 
 The View Transition Class is the CSS class name(s) applied by React during the transition when the ViewTransition activates. It can be a string or an object.
+
 - `string`: the `class` added on the child elements when activated. If `'none'` is provided, no class will be added.
 - `object`: the class added on the child elements will be the key matching View Transition type added with `addTransitionType`. The object can also specify a `default` to use if no matching type is found.
 
 The value `'none'` can be used to prevent a View Transition from activating for a specific trigger.
 
-### Styling View Transitions {/*styling-view-transitions*/}
+### Styling View Transitions {/* styling-view-transitions */}
 
 <Note>
 
@@ -137,7 +135,6 @@ To customize the animation for a `<ViewTransition>` you can provide a View Trans
 
 For example, to customize an "enter" animation, provide a class name to the `enter` prop:
 
-
 ```js
 <ViewTransition enter="slide-in">
 ```
@@ -146,18 +143,16 @@ When the `<ViewTransition>` activates an "enter" animation, React will add the c
 
 ```css
 ::view-transition-group(.slide-in) {
-  
 }
 ::view-transition-old(.slide-in) {
-
 }
 ::view-transition-new(.slide-in) {
-
 }
 ```
+
 In the future, CSS libraries may add built-in animations using View Transition Classes to make this easier to use.
 
-#### Caveats {/*caveats*/}
+#### Caveats {/* caveats */}
 
 - By default, `setState` updates immediately and does not activate `<ViewTransition>`, only updates wrapped in a [Transition](/reference/react/useTransition). You can also use [`<Suspense>`](/reference/react/Suspense) to opt-in to a Transition to [reveal content](/reference/react/Suspense#revealing-content-together-at-once).
 - `<ViewTransition>` creates an image that can be moved around, scaled and cross-faded. Unlike Layout Animations you may have seen in React Native or Motion, this means that not every individual Element inside of it animates its position. This can lead to better performance and a more continuous feeling, smooth animation compared to animating every individual piece. However, it can also lose continuity in things that should be moving by themselves. So you might have to add more `<ViewTransition>` boundaries manually as a result.
@@ -166,10 +161,9 @@ In the future, CSS libraries may add built-in animations using View Transition C
 
 ---
 
+## Usage {/* usage */}
 
-## Usage {/*usage*/}
-
-### Animating an element on enter/exit {/*animating-an-element-on-enter*/}
+### Animating an element on enter/exit {/* animating-an-element-on-enter */}
 
 Enter/Exit Transitions trigger when a `<ViewTransition>` is added or removed by a component in a transition:
 
@@ -191,14 +185,14 @@ function Parent() {
 }
 ```
 
-When `setShow` is called, `show` switches to `true` and the `Child` component is rendered. When `setShow` is called inside `startTransition`, and `Child` renders a `ViewTransition` before any other DOM nodes, an `enter` animation is triggered. 
+When `setShow` is called, `show` switches to `true` and the `Child` component is rendered. When `setShow` is called inside `startTransition`, and `Child` renders a `ViewTransition` before any other DOM nodes, an `enter` animation is triggered.
 
 When `show` switches back to `false`, an `exit` animation is triggered.
 
 <Sandpack>
 
 ```js src/Video.js hidden
-function Thumbnail({ video, children }) {
+function Thumbnail({video, children}) {
   return (
     <div
       aria-hidden="true"
@@ -208,12 +202,10 @@ function Thumbnail({ video, children }) {
   );
 }
 
-export function Video({ video }) {
+export function Video({video}) {
   return (
     <div className="video">
-      <div
-        className="link"
-      >
+      <div className="link">
         <Thumbnail video={video}></Thumbnail>
 
         <div className="info">
@@ -227,18 +219,14 @@ export function Video({ video }) {
 ```
 
 ```js
-import {
-  ViewTransition,
-  useState,
-  startTransition
-} from 'react';
-import {Video} from "./Video";
-import videos from "./data"
+import {ViewTransition, useState, startTransition} from 'react';
+import {Video} from './Video';
+import videos from './data';
 
 function Item() {
   return (
     <ViewTransition>
-      <Video video={videos[0]}/>
+      <Video video={videos[0]} />
     </ViewTransition>
   );
 }
@@ -252,8 +240,9 @@ export default function Component() {
           startTransition(() => {
             setShowItem((prev) => !prev);
           });
-        }}
-      >{showItem ? '➖' : '➕'}</button>
+        }}>
+        {showItem ? '➖' : '➕'}
+      </button>
 
       {showItem ? <Item /> : null}
     </>
@@ -268,11 +257,10 @@ export default [
     title: 'First video',
     description: 'Video description',
     image: 'blue',
-  }
-]
+  },
+];
 ```
 
-
 ```css
 #root {
   display: flex;
@@ -379,7 +367,8 @@ function Component() {
 </Pitfall>
 
 ---
-### Animating a shared element {/*animating-a-shared-element*/}
+
+### Animating a shared element {/* animating-a-shared-element */}
 
 Normally, we don't recommend assigning a name to a `<ViewTransition>` and instead let React assign it an automatic name. The reason you might want to assign a name is to animate between completely different components when one tree unmounts and another tree mounts at the same time. To preserve continuity.
 
@@ -398,36 +387,35 @@ If Transition first unmounts one side and then leads to a `<Suspense>` fallback
 <Sandpack>
 
 ```js
-import {
-  ViewTransition,
-  useState,
-  startTransition
-} from "react";
-import {Video, Thumbnail, FullscreenVideo} from "./Video";
-import videos from "./data";
+import {ViewTransition, useState, startTransition} from 'react';
+import {Video, Thumbnail, FullscreenVideo} from './Video';
+import videos from './data';
 
 export default function Component() {
   const [fullscreen, setFullscreen] = useState(false);
   if (fullscreen) {
-    return <FullscreenVideo
+    return (
+      <FullscreenVideo
+        video={videos[0]}
+        onExit={() => startTransition(() => setFullscreen(false))}
+      />
+    );
+  }
+  return (
+    <Video
       video={videos[0]}
-      onExit={() => startTransition(() => setFullscreen(false))}
+      onClick={() => startTransition(() => setFullscreen(true))}
     />
-  }
-  return <Video
-    video={videos[0]}
-    onClick={() => startTransition(() => setFullscreen(true))}
-  />
+  );
 }
-
 ```
 
 ```js src/Video.js
-import {ViewTransition} from "react";
+import {ViewTransition} from 'react';
 
-const THUMBNAIL_NAME = "video-thumbnail"
+const THUMBNAIL_NAME = 'video-thumbnail';
 
-export function Thumbnail({ video, children }) {
+export function Thumbnail({video, children}) {
   return (
     <ViewTransition name={THUMBNAIL_NAME}>
       <div
@@ -439,7 +427,7 @@ export function Thumbnail({ video, children }) {
   );
 }
 
-export function Video({ video, onClick }) {
+export function Video({video, onClick}) {
   return (
     <div className="video">
       <div className="link" onClick={onClick}>
@@ -462,10 +450,7 @@ export function FullscreenVideo({video, onExit}) {
           tabIndex={-1}
           className={`thumbnail ${video.image} fullscreen`}
         />
-        <button
-          className="close-button"
-          onClick={onExit}
-        >
+        <button className="close-button" onClick={onExit}>
           ✖
         </button>
       </ViewTransition>
@@ -474,7 +459,6 @@ export function FullscreenVideo({video, onExit}) {
 }
 ```
 
-
 ```js src/data.js hidden
 export default [
   {
@@ -482,11 +466,10 @@ export default [
     title: 'First video',
     description: 'Video description',
     image: 'blue',
-  }
-]
+  },
+];
 ```
 
-
 ```css
 #root {
   display: flex;
@@ -593,7 +576,6 @@ button:hover {
 }
 ```
 
-
 ```json package.json hidden
 {
   "dependencies": {
@@ -606,7 +588,6 @@ button:hover {
 
 </Sandpack>
 
-
 <Note>
 
 If either the mounted or unmounted side of a pair is outside the viewport, then no pair is formed. This ensures that it doesn't fly in or out of the viewport when something is scrolled. Instead it's treated as a regular enter/exit by itself.
@@ -630,14 +611,12 @@ import {MY_NAME} from './shared-name';
 
 </Pitfall>
 
-
 ---
 
-### Animating reorder of items in a list {/*animating-reorder-of-items-in-a-list*/}
-
+### Animating reorder of items in a list {/* animating-reorder-of-items-in-a-list */}
 
 ```js
-items.map(item => <Component key={item.id} item={item} />)
+items.map((item) => <Component key={item.id} item={item} />);
 ```
 
 When reordering a list, without updating the content, the "update" animation triggers on each `<ViewTransition>` in the list if they're outside a DOM node. Similar to enter/exit animations.
@@ -646,13 +625,18 @@ This means that this will trigger the animation on this `<ViewTransition>`:
 
 ```js
 function Component() {
-  return <ViewTransition><div>...</div></ViewTransition>;
+  return (
+    <ViewTransition>
+      <div>...</div>
+    </ViewTransition>
+  );
 }
 ```
+
 <Sandpack>
 
 ```js src/Video.js hidden
-function Thumbnail({ video }) {
+function Thumbnail({video}) {
   return (
     <div
       aria-hidden="true"
@@ -662,7 +646,7 @@ function Thumbnail({ video }) {
   );
 }
 
-export function Video({ video }) {
+export function Video({video}) {
   return (
     <div className="video">
       <div className="link">
@@ -678,13 +662,9 @@ export function Video({ video }) {
 ```
 
 ```js
-import {
-  ViewTransition,
-  useState,
-  startTransition
-} from "react";
-import {Video} from "./Video";
-import videos from "./data";
+import {ViewTransition, useState, startTransition} from 'react';
+import {Video} from './Video';
+import videos from './data';
 
 export default function Component() {
   const [orderedVideos, setOrderedVideos] = useState(videos);
@@ -710,8 +690,6 @@ export default function Component() {
     </>
   );
 }
-  
-
 ```
 
 ```js src/data.js hidden
@@ -739,11 +717,10 @@ export default [
     title: 'Fourth video',
     description: 'Video description',
     image: 'purple',
-  }
-]
+  },
+];
 ```
 
-
 ```css
 #root {
   display: flex;
@@ -833,7 +810,6 @@ button:hover {
 }
 ```
 
-
 ```json package.json hidden
 {
   "dependencies": {
@@ -850,15 +826,20 @@ However, this wouldn't animate each individual item:
 
 ```js
 function Component() {
-  return <div><ViewTransition>...</ViewTransition></div>;
+  return (
+    <div>
+      <ViewTransition>...</ViewTransition>
+    </div>
+  );
 }
 ```
+
 Instead, any parent `<ViewTransition>` would cross-fade. If there is no parent `<ViewTransition>` then there's no animation in that case.
 
 <Sandpack>
 
 ```js src/Video.js hidden
-function Thumbnail({ video }) {
+function Thumbnail({video}) {
   return (
     <div
       aria-hidden="true"
@@ -868,7 +849,7 @@ function Thumbnail({ video }) {
   );
 }
 
-export function Video({ video }) {
+export function Video({video}) {
   return (
     <div className="video">
       <div className="link">
@@ -884,13 +865,9 @@ export function Video({ video }) {
 ```
 
 ```js
-import {
-  ViewTransition,
-  useState,
-  startTransition
-} from "react";
-import {Video} from "./Video";
-import videos from "./data";
+import {ViewTransition, useState, startTransition} from 'react';
+import {Video} from './Video';
+import videos from './data';
 
 export default function Component() {
   const [orderedVideos, setOrderedVideos] = useState(videos);
@@ -914,8 +891,6 @@ export default function Component() {
     </>
   );
 }
-  
-
 ```
 
 ```js src/data.js hidden
@@ -943,11 +918,10 @@ export default [
     title: 'Fourth video',
     description: 'Video description',
     image: 'purple',
-  }
-]
+  },
+];
 ```
 
-
 ```css
 #root {
   display: flex;
@@ -1037,7 +1011,6 @@ button:hover {
 }
 ```
 
-
 ```json package.json hidden
 {
   "dependencies": {
@@ -1068,7 +1041,7 @@ It's important to properly use keys to preserve identity when reordering lists.
 
 ---
 
-### Animating from Suspense content {/*animating-from-suspense-content*/}
+### Animating from Suspense content {/* animating-from-suspense-content */}
 
 Just like any Transition, React waits for data and new CSS (`<link rel="stylesheet" precedence="...">`) before running the animation. In addition to this, ViewTransitions also wait up to 500ms for new fonts to load before starting the animation to avoid them flickering in later. For the same reason, an image wrapped in ViewTransition will wait for the image to load.
 
@@ -1085,12 +1058,13 @@ Update:
   </Suspense>
 </ViewTransition>
 ```
+
 In this scenario when the content goes from A to B, it'll be treated as an "update" and apply that class if appropriate. Both A and B will get the same view-transition-name and therefore they're acting as a cross-fade by default.
 
 <Sandpack>
 
 ```js src/Video.js hidden
-function Thumbnail({ video, children }) {
+function Thumbnail({video, children}) {
   return (
     <div
       aria-hidden="true"
@@ -1100,7 +1074,7 @@ function Thumbnail({ video, children }) {
   );
 }
 
-export function Video({ video }) {
+export function Video({video}) {
   return (
     <div className="video">
       <div className="link">
@@ -1115,7 +1089,7 @@ export function Video({ video }) {
 }
 
 export function VideoPlaceholder() {
-  const video = {image: "loading"}
+  const video = {image: 'loading'};
   return (
     <div className="video">
       <div className="link">
@@ -1131,20 +1105,13 @@ export function VideoPlaceholder() {
 ```
 
 ```js
-import {
-  ViewTransition,
-  useState,
-  startTransition,
-  Suspense
-} from 'react';
-import {Video, VideoPlaceholder} from "./Video";
-import {useLazyVideoData} from "./data"
+import {ViewTransition, useState, startTransition, Suspense} from 'react';
+import {Video, VideoPlaceholder} from './Video';
+import {useLazyVideoData} from './data';
 
 function LazyVideo() {
   const video = useLazyVideoData();
-  return (
-    <Video video={video}/>
-  );
+  return <Video video={video} />;
 }
 
 export default function Component() {
@@ -1156,8 +1123,9 @@ export default function Component() {
           startTransition(() => {
             setShowItem((prev) => !prev);
           });
-        }}
-      >{showItem ? '➖' : '➕'}</button>
+        }}>
+        {showItem ? '➖' : '➕'}
+      </button>
       {showItem ? (
         <ViewTransition>
           <Suspense fallback={<VideoPlaceholder />}>
@@ -1171,7 +1139,7 @@ export default function Component() {
 ```
 
 ```js src/data.js hidden
-import {use} from "react";
+import {use} from 'react';
 
 let cache = null;
 
@@ -1196,7 +1164,6 @@ export function useLazyVideoData() {
 }
 ```
 
-
 ```css
 #root {
   display: flex;
@@ -1242,7 +1209,12 @@ button:hover {
   background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
 }
 .loading {
-  background-image: linear-gradient(90deg, rgba(173, 216, 230, 0.3) 25%, rgba(135, 206, 250, 0.5) 50%, rgba(173, 216, 230, 0.3) 75%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(173, 216, 230, 0.3) 25%,
+    rgba(135, 206, 250, 0.5) 50%,
+    rgba(173, 216, 230, 0.3) 75%
+  );
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite;
 }
@@ -1326,7 +1298,8 @@ In this scenario, these are two separate ViewTransition instances each with thei
 You can achieve different effects depending on where you choose to place the `<ViewTransition>` boundary.
 
 ---
-### Opting-out of an animation {/*opting-out-of-an-animation*/}
+
+### Opting-out of an animation {/* opting-out-of-an-animation */}
 
 Sometimes you're wrapping a large existing component, like a whole page, and you want to animate some updates, such as changing the theme. However, you don't want it to opt-in all updates inside the whole page to cross-fade when they're updating. Especially if you're incrementally adding more animations.
 
@@ -1335,9 +1308,7 @@ You can use the class "none" to opt-out of an animation. By wrapping your childr
 ```js
 <ViewTransition>
   <div className={theme}>
-    <ViewTransition update="none">
-      {children}
-    </ViewTransition>
+    <ViewTransition update="none">{children}</ViewTransition>
   </div>
 </ViewTransition>
 ```
@@ -1346,7 +1317,7 @@ This will only animate if the theme changes and not if only the children update.
 
 ---
 
-### Customizing animations {/*customizing-animations*/}
+### Customizing animations {/* customizing-animations */}
 
 By default, `<ViewTransition>` includes the default cross-fade from the browser.
 
@@ -1364,18 +1335,18 @@ And define slow-fade in CSS using view transition classes:
 
 ```css
 ::view-transition-old(.slow-fade) {
-    animation-duration: 500ms;
+  animation-duration: 500ms;
 }
 
 ::view-transition-new(.slow-fade) {
-    animation-duration: 500ms;
+  animation-duration: 500ms;
 }
 ```
 
 <Sandpack>
 
 ```js src/Video.js hidden
-function Thumbnail({ video, children }) {
+function Thumbnail({video, children}) {
   return (
     <div
       aria-hidden="true"
@@ -1385,12 +1356,10 @@ function Thumbnail({ video, children }) {
   );
 }
 
-export function Video({ video }) {
+export function Video({video}) {
   return (
     <div className="video">
-      <div
-        className="link"
-      >
+      <div className="link">
         <Thumbnail video={video}></Thumbnail>
 
         <div className="info">
@@ -1404,18 +1373,14 @@ export function Video({ video }) {
 ```
 
 ```js
-import {
-  ViewTransition,
-  useState,
-  startTransition
-} from 'react';
-import {Video} from "./Video";
-import videos from "./data"
+import {ViewTransition, useState, startTransition} from 'react';
+import {Video} from './Video';
+import videos from './data';
 
 function Item() {
   return (
     <ViewTransition default="slow-fade">
-      <Video video={videos[0]}/>
+      <Video video={videos[0]} />
     </ViewTransition>
   );
 }
@@ -1429,8 +1394,9 @@ export default function Component() {
           startTransition(() => {
             setShowItem((prev) => !prev);
           });
-        }}
-      >{showItem ? '➖' : '➕'}</button>
+        }}>
+        {showItem ? '➖' : '➕'}
+      </button>
 
       {showItem ? <Item /> : null}
     </>
@@ -1445,18 +1411,17 @@ export default [
     title: 'First video',
     description: 'Video description',
     image: 'blue',
-  }
-]
+  },
+];
 ```
 
-
 ```css
 ::view-transition-old(.slow-fade) {
-    animation-duration: 500ms;
+  animation-duration: 500ms;
 }
 
 ::view-transition-new(.slow-fade) {
-    animation-duration: 500ms;
+  animation-duration: 500ms;
 }
 
 #root {
@@ -1556,7 +1521,7 @@ In addition to setting the `default`, you can also provide configurations for `e
 <Sandpack>
 
 ```js src/Video.js hidden
-function Thumbnail({ video, children }) {
+function Thumbnail({video, children}) {
   return (
     <div
       aria-hidden="true"
@@ -1566,12 +1531,10 @@ function Thumbnail({ video, children }) {
   );
 }
 
-export function Video({ video }) {
+export function Video({video}) {
   return (
     <div className="video">
-      <div
-        className="link"
-      >
+      <div className="link">
         <Thumbnail video={video}></Thumbnail>
 
         <div className="info">
@@ -1585,18 +1548,14 @@ export function Video({ video }) {
 ```
 
 ```js
-import {
-  ViewTransition,
-  useState,
-  startTransition
-} from 'react';
-import {Video} from "./Video";
-import videos from "./data"
+import {ViewTransition, useState, startTransition} from 'react';
+import {Video} from './Video';
+import videos from './data';
 
 function Item() {
   return (
     <ViewTransition enter="slide-in" exit="slide-out">
-      <Video video={videos[0]}/>
+      <Video video={videos[0]} />
     </ViewTransition>
   );
 }
@@ -1610,8 +1569,9 @@ export default function Component() {
           startTransition(() => {
             setShowItem((prev) => !prev);
           });
-        }}
-      >{showItem ? '➖' : '➕'}</button>
+        }}>
+        {showItem ? '➖' : '➕'}
+      </button>
 
       {showItem ? <Item /> : null}
     </>
@@ -1626,11 +1586,10 @@ export default [
     title: 'First video',
     description: 'Video description',
     image: 'blue',
-  }
-]
+  },
+];
 ```
 
-
 ```css
 ::view-transition-old(.slide-in) {
   animation-name: slideOutRight;
@@ -1803,19 +1762,21 @@ button:hover {
 
 </Sandpack>
 
-### Customizing animations with types {/*customizing-animations-with-types*/}
+### Customizing animations with types {/* customizing-animations-with-types */}
+
 You can use the [`addTransitionType`](/reference/react/addTransitionType) API to add a class name to the child elements when a specific transition type is activated for a specific activation trigger. This allows you to customize the animation for each type of transition.
 
 For example, to customize the animation for all forward and backward navigations:
 
 ```js
-<ViewTransition default={{
-  'navigation-back': 'slide-right',
-  'navigation-forward': 'slide-left',
- }}>
+<ViewTransition
+  default={{
+    'navigation-back': 'slide-right',
+    'navigation-forward': 'slide-left',
+  }}>
   <div>...</div>
-</ViewTransition>
- 
+</ViewTransition>;
+
 // in your router:
 startTransition(() => {
   addTransitionType('navigation-' + navigationType);
@@ -1829,7 +1790,7 @@ In the future, routers and other libraries may add support for standard view-tra
 <Sandpack>
 
 ```js src/Video.js hidden
-function Thumbnail({ video, children }) {
+function Thumbnail({video, children}) {
   return (
     <div
       aria-hidden="true"
@@ -1839,12 +1800,10 @@ function Thumbnail({ video, children }) {
   );
 }
 
-export function Video({ video }) {
+export function Video({video}) {
   return (
     <div className="video">
-      <div
-        className="link"
-      >
+      <div className="link">
         <Thumbnail video={video}></Thumbnail>
         <div className="info">
           <div className="video-title">{video.title}</div>
@@ -1862,25 +1821,22 @@ import {
   addTransitionType,
   useState,
   startTransition,
-} from "react";
-import {Video} from "./Video";
-import videos from "./data"
+} from 'react';
+import {Video} from './Video';
+import videos from './data';
 
 function Item() {
   return (
-    <ViewTransition enter={
-        {
-          "add-video-back": "slide-in-back",
-          "add-video-forward": "slide-in-forward"
-        }
-      }
-      exit={
-        {
-          "remove-video-back": "slide-in-forward",
-          "remove-video-forward": "slide-in-back"
-        }
-      }>
-      <Video video={videos[0]}/>
+    <ViewTransition
+      enter={{
+        'add-video-back': 'slide-in-back',
+        'add-video-forward': 'slide-in-forward',
+      }}
+      exit={{
+        'remove-video-back': 'slide-in-forward',
+        'remove-video-forward': 'slide-in-back',
+      }}>
+      <Video video={videos[0]} />
     </ViewTransition>
   );
 }
@@ -1894,26 +1850,28 @@ export default function Component() {
           onClick={() => {
             startTransition(() => {
               if (showItem) {
-                addTransitionType("remove-video-back")
+                addTransitionType('remove-video-back');
               } else {
-                addTransitionType("add-video-back")
+                addTransitionType('add-video-back');
               }
               setShowItem((prev) => !prev);
             });
-          }}
-        >⬅️</button>
+          }}>
+          ⬅️
+        </button>
         <button
           onClick={() => {
             startTransition(() => {
               if (showItem) {
-                addTransitionType("remove-video-forward")
+                addTransitionType('remove-video-forward');
               } else {
-                addTransitionType("add-video-forward")
+                addTransitionType('add-video-forward');
               }
               setShowItem((prev) => !prev);
             });
-          }}
-        >➡️</button>
+          }}>
+          ➡️
+        </button>
       </div>
       {showItem ? <Item /> : null}
     </>
@@ -1928,11 +1886,10 @@ export default [
     title: 'First video',
     description: 'Video description',
     image: 'blue',
-  }
-]
+  },
+];
 ```
 
-
 ```css
 ::view-transition-old(.slide-in-back) {
   animation-name: slideOutRight;
@@ -2132,7 +2089,238 @@ button:hover {
 
 </Sandpack>
 
-### Building View Transition enabled routers {/*building-view-transition-enabled-routers*/}
+---
+
+### Animating imperatively with callbacks {/* animating-imperatively-with-callbacks */}
+
+While [View Transition Classes](#view-transition-class) let you define animations with CSS, sometimes you need imperative control over the animation. The `onEnter`, `onExit`, `onUpdate`, and `onShare` callbacks give you direct access to the view transition pseudo-elements so you can animate them using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+
+Each callback receives an `instance` with `.old` and `.new` properties representing the view transition pseudo-elements. You can call `.animate()` on them just like you would on a DOM element:
+
+```js
+<ViewTransition
+  onEnter={(instance, types) => {
+    instance.new.animate(
+      [
+        {opacity: 0, transform: 'scale(0.8)'},
+        {opacity: 1, transform: 'scale(1)'},
+      ],
+      {duration: 300, easing: 'ease-out'}
+    );
+  }}>
+  <div>...</div>
+</ViewTransition>
+```
+
+When you start animations imperatively, return a cleanup function to cancel them when the View Transition is interrupted:
+
+<Sandpack>
+
+```js src/Video.js hidden
+function Thumbnail({video, children}) {
+  return (
+    <div
+      aria-hidden="true"
+      tabIndex={-1}
+      className={`thumbnail ${video.image}`}
+    />
+  );
+}
+
+export function Video({video}) {
+  return (
+    <div className="video">
+      <div className="link">
+        <Thumbnail video={video}></Thumbnail>
+
+        <div className="info">
+          <div className="video-title">{video.title}</div>
+          <div className="video-description">{video.description}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+```js
+import {ViewTransition, useState, startTransition} from 'react';
+import {Video} from './Video';
+import videos from './data';
+
+function Item() {
+  return (
+    <ViewTransition
+      onEnter={(instance) => {
+        const anim = instance.new.animate(
+          [
+            {opacity: 0, transform: 'translateY(20px)'},
+            {opacity: 1, transform: 'translateY(0)'},
+          ],
+          {duration: 500, easing: 'ease-out'}
+        );
+        return () => anim.cancel();
+      }}
+      onExit={(instance) => {
+        const anim = instance.old.animate(
+          [
+            {opacity: 1, transform: 'translateY(0)'},
+            {opacity: 0, transform: 'translateY(-20px)'},
+          ],
+          {duration: 300, easing: 'ease-in'}
+        );
+        return () => anim.cancel();
+      }}>
+      <Video video={videos[0]} />
+    </ViewTransition>
+  );
+}
+
+export default function Component() {
+  const [showItem, setShowItem] = useState(false);
+  return (
+    <>
+      <button
+        onClick={() => {
+          startTransition(() => {
+            setShowItem((prev) => !prev);
+          });
+        }}>
+        {showItem ? '➖' : '➕'}
+      </button>
+
+      {showItem ? <Item /> : null}
+    </>
+  );
+}
+```
+
+```js src/data.js hidden
+export default [
+  {
+    id: '1',
+    title: 'First video',
+    description: 'Video description',
+    image: 'blue',
+  },
+];
+```
+
+```css
+#root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 200px;
+}
+button {
+  border: none;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f0f8ff;
+  color: white;
+  font-size: 20px;
+  cursor: pointer;
+  transition: background-color 0.3s, border 0.3s;
+}
+button:hover {
+  border: 2px solid #ccc;
+  background-color: #e0e8ff;
+}
+.thumbnail {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.5rem;
+  outline-offset: 2px;
+  width: 8rem;
+  vertical-align: middle;
+  background-color: #ffffff;
+  background-size: cover;
+  user-select: none;
+}
+.thumbnail.blue {
+  background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+.video {
+  display: flex;
+  flex-direction: row;
+  gap: 0.75rem;
+  align-items: center;
+  margin-top: 1em;
+}
+.video .link {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 0;
+  gap: 0.125rem;
+  outline-offset: 4px;
+  cursor: pointer;
+}
+.video .info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 8px;
+  gap: 0.125rem;
+}
+.video .info:hover {
+  text-decoration: underline;
+}
+.video-title {
+  font-size: 15px;
+  line-height: 1.25;
+  font-weight: 700;
+  color: #23272f;
+}
+.video-description {
+  color: #5e687e;
+  font-size: 13px;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "latest"
+  }
+}
+```
+
+</Sandpack>
+
+You can also use `types` to conditionally apply different animations based on how the Transition was triggered. For example, you could use [`addTransitionType`](/reference/react/addTransitionType) to mark a Transition as "fast" and then adjust the animation duration:
+
+```js
+startTransition(() => {
+  addTransitionType('fast');
+  setShowItem(true);
+});
+
+// In the ViewTransition callback:
+onEnter={(instance, types) => {
+  const duration = types.includes('fast') ? 150 : 500;
+  const anim = instance.new.animate(
+    [{opacity: 0}, {opacity: 1}],
+    {duration, easing: 'ease-out'}
+  );
+  return () => anim.cancel();
+}}
+```
+
+---
+
+### Building View Transition enabled routers {/* building-view-transition-enabled-routers */}
 
 React waits for any pending Navigation to finish to ensure that scroll restoration happens within the animation. If the Navigation is blocked on React, your router must unblock in `useLayoutEffect` since `useEffect` would lead to a deadlock.
 
@@ -2140,9 +2328,9 @@ If a `startTransition` is started from the legacy popstate event, such as during
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## Troubleshooting {/* troubleshooting */}
 
-### My `<ViewTransition>` is not activating {/*my-viewtransition-is-not-activating*/}
+### My `<ViewTransition>` is not activating {/* my-viewtransition-is-not-activating */}
 
 `<ViewTransition>` only activates if it is placed before any DOM node:
 
@@ -2158,7 +2346,7 @@ function Component() {
 
 To fix, ensure that the `<ViewTransition>` comes before any other DOM nodes:
 
-```js [3, 5] 
+```js [3, 5]
 function Component() {
   return (
     <ViewTransition>
@@ -2168,11 +2356,10 @@ function Component() {
 }
 ```
 
-### I'm getting an error "There are two `<ViewTransition name=%s>` components with the same name mounted at the same time." {/*two-viewtransition-with-same-name*/}
+### I'm getting an error "There are two `<ViewTransition name=%s>` components with the same name mounted at the same time." {/* two-viewtransition-with-same-name */}
 
 This error occurs when two `<ViewTransition>` components with the same `name` are mounted at the same time:
 
-
 ```js [3]
 function Item() {
   // 🚩 All items will get the same "name".
@@ -2182,7 +2369,9 @@ function Item() {
 function ItemList({items}) {
   return (
     <>
-      {item.map(item => <Item key={item.id} />)}
+      {item.map((item) => (
+        <Item key={item.id} />
+      ))}
     </>
   );
 }
@@ -2194,16 +2383,16 @@ This will cause the View Transition to error. In development, React detects this
 <ConsoleLogLine level="error">
 
 There are two `<ViewTransition name=%s>` components with the same name mounted at the same time. This is not supported and will cause View Transitions to error. Try to use a more unique name e.g. by using a namespace prefix and adding the id of an item to the name.
-{'    '}at Item
-{'    '}at ItemList
+{' '}at Item
+{' '}at ItemList
 
 </ConsoleLogLine>
 
 <ConsoleLogLine level="error">
 
 The existing `<ViewTransition name=%s>` duplicate has this stack trace.
-{'    '}at Item
-{'    '}at ItemList
+{' '}at Item
+{' '}at ItemList
 
 </ConsoleLogLine>
 </ConsoleBlockMulti>
@@ -2219,7 +2408,9 @@ function Item({id}) {
 function ItemList({items}) {
   return (
     <>
-      {item.map(item => <Item key={item.id} item={item} />)}
+      {item.map((item) => (
+        <Item key={item.id} item={item} />
+      ))}
     </>
   );
 }

From 30e3d402942dcdf0a1f1a6258b5724d072a3ecf8 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@meta.com>
Date: Fri, 13 Feb 2026 23:00:50 -0500
Subject: [PATCH 3/6] Fiz lint

---
 src/content/reference/react/ViewTransition.md | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index f84726ccf78..27c44a93ec6 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -29,9 +29,9 @@ import {ViewTransition} from 'react';
 
 ---
 
-## Reference {/* reference */}
+## Reference {/*reference*/}
 
-### `<ViewTransition>` {/* viewtransition */}
+### `<ViewTransition>` {/*viewtransition*/}
 
 Wrap elements in `<ViewTransition>` to animate them when they update inside a [Transition](/reference/react/useTransition). React uses the following heuristics to determine if a View Transition activates for an animation:
 
@@ -44,7 +44,7 @@ By default, `<ViewTransition>` animates with a smooth cross-fade (the browser de
 
 <DeepDive>
 
-#### How does `<ViewTransition>` work? {/* how-does-viewtransition-work */}
+#### How does `<ViewTransition>` work? {/*how-does-viewtransition-work*/}
 
 Under the hood, React applies `view-transition-name` to inline styles of the nearest DOM node nested inside the `<ViewTransition>` component. If there are multiple sibling DOM nodes like `<ViewTransition><div /><div /></ViewTransition>` then React adds a suffix to the name to make each unique but conceptually they're part of the same one. React doesn't apply these eagerly but only at the time that boundary should participate in an animation.
 
@@ -70,7 +70,7 @@ After the finished Promise of the `startViewTransition` is resolved, React will
 
 </DeepDive>
 
-#### Props {/* props */}
+#### Props {/*props*/}
 
 By default, `<ViewTransition>` animates with a smooth cross-fade. You can customize the animation, or specify a shared element transition, with these props:
 
@@ -81,7 +81,7 @@ By default, `<ViewTransition>` animates with a smooth cross-fade. You can custom
 - **optional** `default`: A string or object. The [View Transition Class](#view-transition-class) used when no other matching activation prop is found.
 - **optional** `name`: A string or object. The name of the View Transition used for shared element transitions. If not provided, React will use a unique name for each View Transition to prevent unexpected animations.
 
-#### Callback {/* events */}
+#### Callback {/*events*/}
 
 These callbacks allow you to control the animation imperatively using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). React calls them after the View Transition's [`ready`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/ready) Promise resolves, once built-in default animations have already been computed. Only one callback fires per `<ViewTransition>` per Transition.
 
@@ -114,7 +114,7 @@ Each callback can optionally return a **cleanup function**. The cleanup function
 </ViewTransition>
 ```
 
-### View Transition Class {/* view-transition-class */}
+### View Transition Class {/*view-transition-class*/}
 
 The View Transition Class is the CSS class name(s) applied by React during the transition when the ViewTransition activates. It can be a string or an object.
 
@@ -123,7 +123,7 @@ The View Transition Class is the CSS class name(s) applied by React during the t
 
 The value `'none'` can be used to prevent a View Transition from activating for a specific trigger.
 
-### Styling View Transitions {/* styling-view-transitions */}
+### Styling View Transitions {/*styling-view-transitions*/}
 
 <Note>
 
@@ -152,7 +152,7 @@ When the `<ViewTransition>` activates an "enter" animation, React will add the c
 
 In the future, CSS libraries may add built-in animations using View Transition Classes to make this easier to use.
 
-#### Caveats {/* caveats */}
+#### Caveats {/*caveats*/}
 
 - By default, `setState` updates immediately and does not activate `<ViewTransition>`, only updates wrapped in a [Transition](/reference/react/useTransition). You can also use [`<Suspense>`](/reference/react/Suspense) to opt-in to a Transition to [reveal content](/reference/react/Suspense#revealing-content-together-at-once).
 - `<ViewTransition>` creates an image that can be moved around, scaled and cross-faded. Unlike Layout Animations you may have seen in React Native or Motion, this means that not every individual Element inside of it animates its position. This can lead to better performance and a more continuous feeling, smooth animation compared to animating every individual piece. However, it can also lose continuity in things that should be moving by themselves. So you might have to add more `<ViewTransition>` boundaries manually as a result.
@@ -161,9 +161,9 @@ In the future, CSS libraries may add built-in animations using View Transition C
 
 ---
 
-## Usage {/* usage */}
+## Usage {/*usage*/}
 
-### Animating an element on enter/exit {/* animating-an-element-on-enter */}
+### Animating an element on enter/exit {/*animating-an-element-on-enter*/}
 
 Enter/Exit Transitions trigger when a `<ViewTransition>` is added or removed by a component in a transition:
 
@@ -368,7 +368,7 @@ function Component() {
 
 ---
 
-### Animating a shared element {/* animating-a-shared-element */}
+### Animating a shared element {/*animating-a-shared-element*/}
 
 Normally, we don't recommend assigning a name to a `<ViewTransition>` and instead let React assign it an automatic name. The reason you might want to assign a name is to animate between completely different components when one tree unmounts and another tree mounts at the same time. To preserve continuity.
 
@@ -613,7 +613,7 @@ import {MY_NAME} from './shared-name';
 
 ---
 
-### Animating reorder of items in a list {/* animating-reorder-of-items-in-a-list */}
+### Animating reorder of items in a list {/*animating-reorder-of-items-in-a-list*/}
 
 ```js
 items.map((item) => <Component key={item.id} item={item} />);
@@ -1041,7 +1041,7 @@ It's important to properly use keys to preserve identity when reordering lists.
 
 ---
 
-### Animating from Suspense content {/* animating-from-suspense-content */}
+### Animating from Suspense content {/*animating-from-suspense-content*/}
 
 Just like any Transition, React waits for data and new CSS (`<link rel="stylesheet" precedence="...">`) before running the animation. In addition to this, ViewTransitions also wait up to 500ms for new fonts to load before starting the animation to avoid them flickering in later. For the same reason, an image wrapped in ViewTransition will wait for the image to load.
 
@@ -1299,7 +1299,7 @@ You can achieve different effects depending on where you choose to place the `<V
 
 ---
 
-### Opting-out of an animation {/* opting-out-of-an-animation */}
+### Opting-out of an animation {/*opting-out-of-an-animation*/}
 
 Sometimes you're wrapping a large existing component, like a whole page, and you want to animate some updates, such as changing the theme. However, you don't want it to opt-in all updates inside the whole page to cross-fade when they're updating. Especially if you're incrementally adding more animations.
 
@@ -1317,7 +1317,7 @@ This will only animate if the theme changes and not if only the children update.
 
 ---
 
-### Customizing animations {/* customizing-animations */}
+### Customizing animations {/*customizing-animations*/}
 
 By default, `<ViewTransition>` includes the default cross-fade from the browser.
 
@@ -1762,7 +1762,7 @@ button:hover {
 
 </Sandpack>
 
-### Customizing animations with types {/* customizing-animations-with-types */}
+### Customizing animations with types {/*customizing-animations-with-types*/}
 
 You can use the [`addTransitionType`](/reference/react/addTransitionType) API to add a class name to the child elements when a specific transition type is activated for a specific activation trigger. This allows you to customize the animation for each type of transition.
 
@@ -2091,7 +2091,7 @@ button:hover {
 
 ---
 
-### Animating imperatively with callbacks {/* animating-imperatively-with-callbacks */}
+### Animating imperatively with callbacks {/*animating-imperatively-with-callbacks*/}
 
 While [View Transition Classes](#view-transition-class) let you define animations with CSS, sometimes you need imperative control over the animation. The `onEnter`, `onExit`, `onUpdate`, and `onShare` callbacks give you direct access to the view transition pseudo-elements so you can animate them using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
 
@@ -2320,7 +2320,7 @@ onEnter={(instance, types) => {
 
 ---
 
-### Building View Transition enabled routers {/* building-view-transition-enabled-routers */}
+### Building View Transition enabled routers {/*building-view-transition-enabled-routers*/}
 
 React waits for any pending Navigation to finish to ensure that scroll restoration happens within the animation. If the Navigation is blocked on React, your router must unblock in `useLayoutEffect` since `useEffect` would lead to a deadlock.
 
@@ -2328,7 +2328,7 @@ If a `startTransition` is started from the legacy popstate event, such as during
 
 ---
 
-## Troubleshooting {/* troubleshooting */}
+## Troubleshooting {/*troubleshooting*/}
 
 ### My `<ViewTransition>` is not activating {/* my-viewtransition-is-not-activating */}
 

From 42f9e6d66e58b008e5d94a59ae16bf28f11f64bd Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@meta.com>
Date: Fri, 13 Feb 2026 23:02:17 -0500
Subject: [PATCH 4/6] Fix heading IDs to use no-space format for dead link
 checker

The dead link checker regex expects {/*id*/} format without spaces.
Prettier reformatted these to {/* id */} which broke anchor links.
---
 src/content/reference/react/ViewTransition.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index 27c44a93ec6..69e6c2ba42c 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -2330,7 +2330,7 @@ If a `startTransition` is started from the legacy popstate event, such as during
 
 ## Troubleshooting {/*troubleshooting*/}
 
-### My `<ViewTransition>` is not activating {/* my-viewtransition-is-not-activating */}
+### My `<ViewTransition>` is not activating {/*my-viewtransition-is-not-activating*/}
 
 `<ViewTransition>` only activates if it is placed before any DOM node:
 
@@ -2356,7 +2356,7 @@ function Component() {
 }
 ```
 
-### I'm getting an error "There are two `<ViewTransition name=%s>` components with the same name mounted at the same time." {/* two-viewtransition-with-same-name */}
+### I'm getting an error "There are two `<ViewTransition name=%s>` components with the same name mounted at the same time." {/*two-viewtransition-with-same-name*/}
 
 This error occurs when two `<ViewTransition>` components with the same `name` are mounted at the same time:
 

From 0d909b526e98a0b2145a86afe8e21a8413f84759 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@meta.com>
Date: Fri, 13 Feb 2026 23:07:36 -0500
Subject: [PATCH 5/6] bump CI

---
 src/content/reference/react/ViewTransition.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index 69e6c2ba42c..f628cb9835e 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -2285,6 +2285,7 @@ button:hover {
   color: #5e687e;
   font-size: 13px;
 }
+
 ```
 
 ```json package.json hidden

From 3db914f5405f4087b82f025eff4b6086e332d648 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@meta.com>
Date: Sun, 15 Feb 2026 09:58:09 -0500
Subject: [PATCH 6/6] rm ;

---
 src/content/reference/react/ViewTransition.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index f628cb9835e..3fc72b421e3 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -20,7 +20,7 @@ import {ViewTransition} from 'react';
 
 <ViewTransition>
   <div>...</div>
-</ViewTransition>;
+</ViewTransition>
 ```
 
 </Intro>