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.
Sebastian Markbåge committed
Jan 19, 2026 at 20:53 UTC
d29087523a09d2babff2ce258f3527944a0ecd2e
2 files changed
+3
fixtures/view-transition/src/components/Page.js
+2
@@ -150,6 +150,8 @@ export default function Page({url, navigate}) {
150
const cleanup1 = timeline.animate(animation1);
151
const cleanup2 = timeline.animate(animation2);
152
return () => {
153
+ animation1.cancel();
154
+ animation2.cancel();
155
cleanup1();
156
cleanup2();
157
};
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+1
@@ -2525,6 +2525,7 @@ function animateGesture(
2525
delay: reverse ? rangeEnd : rangeStart,
2526
duration: reverse ? rangeStart - rangeEnd : rangeEnd - rangeStart,
2527
});
2528
+ viewTransitionAnimations.push(animation);
2529
// Let the custom timeline take control of driving the animation.
2530
const cleanup = timeline.animate(animation);
2531
if (cleanup) {