From d29087523a09d2babff2ce258f3527944a0ecd2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Mon, 19 Jan 2026 20:53:05 -0500
Subject: [PATCH] Cancel animation when a custom Timeline is used (#35567)

Follow up to #35559.

The clean up function of the custom timeline doesn't necessarily clean
up the animation. Just the timeline's internal state.

This affects Firefox which doesn't support ScrollTimeline so uses the
polyfill's custom timeline.
---
 fixtures/view-transition/src/components/Page.js               | 2 ++
 packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js | 1 +
 2 files changed, 3 insertions(+)

diff --git a/fixtures/view-transition/src/components/Page.js b/fixtures/view-transition/src/components/Page.js
index 2a3cacf0a5..60faa09732 100644
--- a/fixtures/view-transition/src/components/Page.js
+++ b/fixtures/view-transition/src/components/Page.js
@@ -150,6 +150,8 @@ export default function Page({url, navigate}) {
       const cleanup1 = timeline.animate(animation1);
       const cleanup2 = timeline.animate(animation2);
       return () => {
+        animation1.cancel();
+        animation2.cancel();
         cleanup1();
         cleanup2();
       };
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
index 15e6bf7be3..026f4ae0c8 100644
--- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -2525,6 +2525,7 @@ function animateGesture(
       delay: reverse ? rangeEnd : rangeStart,
       duration: reverse ? rangeStart - rangeEnd : rangeEnd - rangeStart,
     });
+    viewTransitionAnimations.push(animation);
     // Let the custom timeline take control of driving the animation.
     const cleanup = timeline.animate(animation);
     if (cleanup) {