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 2a3cacf0a54..60faa09732d 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 15e6bf7be34..026f4ae0c8c 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) {