react-native-screen-transitions 3.9.0-beta.3 → 3.10.0

package/src/shared/configs/index.ts

@@ -8,12 +8,13 @@ import {
 	SlideFromTop,
 	ZoomIn,
 } from "./presets";
-import { DefaultSnapSpec, DefaultSpec, FlingSpec } from "./specs";
+import { DefaultSnapSpec, DefaultSpec, FlingSpec, Zoom } from "./specs";
 
 export const Specs = {
 	DefaultSpec,
 	DefaultSnapSpec,
 	FlingSpec,
+	Zoom,
 };
 
 export const Presets = {

package/src/shared/configs/specs.ts

@@ -1,4 +1,5 @@
 import type { WithSpringConfig } from "react-native-reanimated";
+import type { TransitionSpec } from "../types/animation.types";
 
 export const DefaultSpec: WithSpringConfig = {
 	stiffness: 1000,
@@ -22,3 +23,25 @@ export const FlingSpec: WithSpringConfig = {
 	overshootClamping: false,
 	energyThreshold: 6e-9,
 };
+
+/**
+ * Paired spring configuration tuned for navigation zoom transitions.
+ */
+export const Zoom = {
+	open: {
+		stiffness: 1000,
+		damping: 500,
+		mass: 3,
+		overshootClamping: false,
+		// @ts-expect-error Reanimated v3 spring config support.
+		restSpeedThreshold: 0.02,
+	},
+	close: {
+		stiffness: 1100,
+		damping: 98,
+		mass: 3,
+		overshootClamping: false,
+		// @ts-expect-error Reanimated v3 spring config support.
+		restSpeedThreshold: 0.02,
+	},
+} satisfies TransitionSpec;

package/src/shared/providers/helpers/measured-bounds-writes.ts

@@ -67,6 +67,7 @@ export const applyMeasuredBoundsWrites = (
 			measured,
 			preparedStyles,
 			group,
+			{ handoff, escapeClipping },
 		);
 	}
 };

package/src/shared/providers/screen/gestures/gestures.provider.tsx

@@ -8,7 +8,6 @@ import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
 import { useWalkUpAndRegisterShadowingClaims } from "./ownership/use-walk-up-and-register-shadowing-claims";
 import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
 import { useBuildPinchGesture } from "./pinch/use-build-pinch-gesture";
-import { useBuildRotationGesture } from "./rotation/use-build-rotation-gesture";
 import {
 	type DirectionClaimMap,
 	type GestureCompositionOwner,
@@ -54,14 +53,9 @@ export const {
 		gestureCompositionOwner,
 	});
 
-	const rotationGesture = useBuildRotationGesture({
-		gestureConfig,
-		gestureCompositionOwner,
-	});
-
 	const detectorGesture = useMemo(
-		() => Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture),
-		[panGesture, pinchGesture, rotationGesture],
+		() => Gesture.Simultaneous(panGesture, pinchGesture),
+		[panGesture, pinchGesture],
 	);
 
 	const value = useMemo<GestureContextType>(
@@ -70,7 +64,6 @@ export const {
 			detectorGesture,
 			panGesture,
 			pinchGesture,
-			rotationGesture,
 			scrollState,
 			gestureContext,
 			claimedDirections: gestureConfig.participation.claimedDirections,
@@ -81,7 +74,6 @@ export const {
 			detectorGesture,
 			panGesture,
 			pinchGesture,
-			rotationGesture,
 			scrollState,
 			gestureContext,
 			gestureConfig.participation.claimedDirections,

package/src/shared/providers/screen/gestures/pan/behavior/pan-lifecycle.ts

@@ -169,6 +169,7 @@ export const finalizePanRelease = (
 		emitWillAnimate: false,
 		markEntering: false,
 		targetProgress: system.targetProgress,
+		animationProgress: system.animationProgress,
 		animations,
 		initialVelocity: plan.progressVelocity,
 	});

package/src/shared/providers/screen/gestures/pinch/activation/use-pinch-activation.ts

@@ -3,7 +3,7 @@ import type {
 	GestureStateManager,
 	GestureTouchEvent,
 } from "react-native-gesture-handler";
-import type { SharedValue } from "react-native-reanimated";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { resolvePinchRuntime } from "../../shared/runtime";
@@ -34,6 +34,48 @@ export const updateAbsolutePinchFocalPoint = (
 	}
 };
 
+export const updatePinchRotation = (
+	event: GestureTouchEvent,
+	gestures: GestureStoreMap,
+	lastAngle: SharedValue<number>,
+	accumulatedRotation: SharedValue<number>,
+	captureOrigin: boolean,
+) => {
+	"worklet";
+	const firstTouch = event.allTouches[0];
+	const secondTouch = event.allTouches[1];
+
+	if (!firstTouch || !secondTouch) {
+		return;
+	}
+
+	const angle = Math.atan2(
+		secondTouch.absoluteY - firstTouch.absoluteY,
+		secondTouch.absoluteX - firstTouch.absoluteX,
+	);
+
+	if (captureOrigin) {
+		lastAngle.set(angle);
+		accumulatedRotation.set(0);
+		gestures.rotation.set(0);
+		gestures.raw.rotation.set(0);
+		return;
+	}
+
+	let angleDelta = angle - lastAngle.get();
+	if (angleDelta > Math.PI) {
+		angleDelta -= 2 * Math.PI;
+	} else if (angleDelta < -Math.PI) {
+		angleDelta += 2 * Math.PI;
+	}
+
+	const rotation = accumulatedRotation.get() + angleDelta;
+	lastAngle.set(angle);
+	accumulatedRotation.set(rotation);
+	gestures.rotation.set(rotation);
+	gestures.raw.rotation.set(rotation);
+};
+
 interface UsePinchActivationProps {
 	runtime: SharedValue<PinchGestureRuntime>;
 	screenOptions: ScreenOptionsContextValue;
@@ -45,6 +87,9 @@ export const usePinchActivation = ({
 	screenOptions,
 	gestureCompositionOwner,
 }: UsePinchActivationProps) => {
+	const lastAngle = useSharedValue(0);
+	const accumulatedRotation = useSharedValue(0);
+
 	const onTouchesDown = useCallback(
 		(
 			event: GestureTouchEvent,
@@ -68,6 +113,13 @@ export const usePinchActivation = ({
 					latestRuntime.stores.gestures,
 					true,
 				);
+				updatePinchRotation(
+					event,
+					latestRuntime.stores.gestures,
+					lastAngle,
+					accumulatedRotation,
+					true,
+				);
 				if (gestureCompositionOwner.get() === null) {
 					gestureCompositionOwner.set("pinch");
 				}
@@ -79,7 +131,13 @@ export const usePinchActivation = ({
 				stateManager?.fail();
 			}
 		},
-		[runtime, screenOptions, gestureCompositionOwner],
+		[
+			runtime,
+			screenOptions,
+			gestureCompositionOwner,
+			lastAngle,
+			accumulatedRotation,
+		],
 	);
 
 	const onTouchesMove = useCallback(
@@ -102,6 +160,13 @@ export const usePinchActivation = ({
 					latestRuntime.stores.gestures,
 					false,
 				);
+				updatePinchRotation(
+					event,
+					latestRuntime.stores.gestures,
+					lastAngle,
+					accumulatedRotation,
+					false,
+				);
 				if (gestureCompositionOwner.get() === null) {
 					gestureCompositionOwner.set("pinch");
 				}
@@ -113,7 +178,13 @@ export const usePinchActivation = ({
 				stateManager.fail();
 			}
 		},
-		[runtime, screenOptions, gestureCompositionOwner],
+		[
+			runtime,
+			screenOptions,
+			gestureCompositionOwner,
+			lastAngle,
+			accumulatedRotation,
+		],
 	);
 
 	return useMemo(

package/src/shared/providers/screen/gestures/pinch/behavior/pinch-lifecycle.ts

@@ -107,6 +107,7 @@ export const finalizePinchRelease = (
 		markEntering: false,
 		animations,
 		targetProgress: system.targetProgress,
+		animationProgress: system.animationProgress,
 		initialVelocity: release.initialVelocity,
 	});
 };

package/src/shared/providers/screen/gestures/pinch/behavior/pinch-release.ts

@@ -95,7 +95,7 @@ export const resolvePinchRelease = (
 	const {
 		participation,
 		policy,
-		stores: { animations },
+		stores: { animations, system },
 	} = runtime;
 	const normalizedScale = clamp(normalizePinchScale(event.scale), -1, 1);
 	const currentProgress = animations.transitionProgress.get();
@@ -106,9 +106,7 @@ export const resolvePinchRelease = (
 			policy.pinchInEnabled,
 			policy.pinchOutEnabled,
 		);
-	const target = shouldDismiss
-		? 0
-		: runtime.stores.gestures.internal.progressBaseline.get();
+	const target = shouldDismiss ? 0 : system.targetProgress.get();
 	const progressVelocity = getPinchReleaseHandoffVelocity(event.velocity);
 	const handoffVelocity = getPinchReleaseHandoffVelocity(
 		event.velocity,

package/src/shared/providers/screen/gestures/types.ts

@@ -4,7 +4,6 @@ import type {
 	GestureUpdateEvent,
 	PanGestureHandlerEventPayload,
 	PinchGestureHandlerEventPayload,
-	RotationGestureHandlerEventPayload,
 } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
 import type { AnimationStoreMap } from "../../../stores/animation.store";
@@ -33,7 +32,6 @@ import type { EffectiveSnapPointsResult } from "./shared/snap-points";
 
 export type PanGesture = ReturnType<typeof Gesture.Pan>;
 export type PinchGesture = ReturnType<typeof Gesture.Pinch>;
-export type RotationGesture = ReturnType<typeof Gesture.Rotation>;
 export type ComposedGesture = ReturnType<typeof Gesture.Simultaneous>;
 
 export type PanGestureEvent =
@@ -44,10 +42,6 @@ export type PinchGestureEvent =
 	| GestureUpdateEvent<PinchGestureHandlerEventPayload>
 	| GestureStateChangeEvent<PinchGestureHandlerEventPayload>;
 
-export type RotationGestureEvent =
-	| GestureUpdateEvent<RotationGestureHandlerEventPayload>
-	| GestureStateChangeEvent<RotationGestureHandlerEventPayload>;
-
 /** Gesture that owns navigation release for the current simultaneous composition. */
 export type GestureCompositionOwner = "pan" | "pinch" | null;
 
@@ -82,7 +76,6 @@ export interface GestureContextType {
 	detectorGesture: ComposedGesture;
 	panGesture: PanGesture;
 	pinchGesture: PinchGesture;
-	rotationGesture: RotationGesture;
 	scrollState: SharedValue<ScrollGestureState | null>;
 	gestureContext: GestureContextType | null;
 	claimedDirections: ClaimedDirections;
@@ -156,8 +149,6 @@ export type PanGestureRuntime = GestureRuntime<PanGesturePolicy>;
 
 export type PinchGestureRuntime = GestureRuntime<PinchGesturePolicy>;
 
-export type RotationGestureRuntime = GestureRuntime<PinchGesturePolicy>;
-
 export interface GestureDimensions {
 	width: number;
 	height: number;
@@ -221,8 +212,3 @@ export interface PinchBehavior {
 	onUpdate: (event: PinchGestureEvent) => void;
 	onEnd: (event: PinchGestureEvent) => void;
 }
-
-export interface RotationBehavior {
-	onStart: () => void;
-	onUpdate: (event: RotationGestureEvent) => void;
-}

package/src/shared/providers/screen/styles/helpers/transition-visual-state.ts

@@ -0,0 +1,44 @@
+/**
+ * Visual lifecycle boundaries use the internal directional clock rather than
+ * physical transition progress, which may overshoot or revisit an endpoint.
+ */
+export const hasOpenTransitionStarted = ({
+	pendingLifecycleStartBlockCount,
+	animationProgress,
+}: {
+	pendingLifecycleStartBlockCount: number;
+	animationProgress: number;
+}) => {
+	"worklet";
+	return pendingLifecycleStartBlockCount === 0 && animationProgress > 0;
+};
+
+export const isOpenTransitionBlocked = ({
+	opening,
+	pendingLifecycleStartBlockCount,
+	animationProgress,
+}: {
+	opening: boolean;
+	pendingLifecycleStartBlockCount: number;
+	animationProgress: number;
+}) => {
+	"worklet";
+	return (
+		opening &&
+		!hasOpenTransitionStarted({
+			pendingLifecycleStartBlockCount,
+			animationProgress,
+		})
+	);
+};
+
+export const hasCloseTransitionFinished = ({
+	closing,
+	animationProgress,
+}: {
+	closing: number;
+	animationProgress: number;
+}) => {
+	"worklet";
+	return !!closing && animationProgress === 0;
+};

package/src/shared/providers/screen/styles/helpers/visibility-gate.ts

@@ -1,11 +1,15 @@
 import { LifecycleTransitionRequestKind } from "../../../../stores/system.store";
+import {
+	hasOpenTransitionStarted,
+	isOpenTransitionBlocked,
+} from "./transition-visual-state";
 
 type ScreenVisibilityGateState = {
 	isFloatingOverlay?: boolean;
 	hasVisibilityGateOpened: boolean;
 	pendingLifecycleStartBlockCount: number;
 	pendingLifecycleRequestKind: LifecycleTransitionRequestKind;
-	progress: number;
+	animationProgress: number;
 	entering: number;
 };
 
@@ -19,7 +23,7 @@ export const resolveScreenVisibilityGate = ({
 	hasVisibilityGateOpened,
 	pendingLifecycleStartBlockCount,
 	pendingLifecycleRequestKind,
-	progress,
+	animationProgress,
 	entering,
 }: ScreenVisibilityGateState): ScreenVisibilityGateDecision => {
 	"worklet";
@@ -30,16 +34,22 @@ export const resolveScreenVisibilityGate = ({
 		};
 	}
 
-	const hasPendingLifecycleBlock = pendingLifecycleStartBlockCount > 0;
 	const isPendingOpen =
 		pendingLifecycleRequestKind === LifecycleTransitionRequestKind.Open;
 	const isOpening = isPendingOpen || !!entering;
-	const isWaitingForOpenToStart = progress <= 0;
-	const shouldBlock =
-		(hasPendingLifecycleBlock || isWaitingForOpenToStart) && isOpening;
+	const shouldBlock = isOpenTransitionBlocked({
+		opening: isOpening,
+		pendingLifecycleStartBlockCount,
+		animationProgress,
+	});
 
 	return {
 		shouldBlock,
-		shouldOpenGate: !shouldBlock && progress > 0,
+		shouldOpenGate:
+			!shouldBlock &&
+			hasOpenTransitionStarted({
+				pendingLifecycleStartBlockCount,
+				animationProgress,
+			}),
 	};
 };

package/src/shared/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -25,9 +25,12 @@ import {
 } from "../../options";
 import { collectInterpolatorSharedValues } from "../helpers/collect-interpolator-shared-values";
 import { normalizeSlots } from "../helpers/normalize-slots";
-import { isOpeningBeforeStart } from "../helpers/opening-phase";
 import type { LocalStyleLayers } from "../helpers/resolve-slot-styles";
 import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options";
+import {
+	hasCloseTransitionFinished,
+	isOpenTransitionBlocked,
+} from "../helpers/transition-visual-state";
 
 const NO_STYLE_LAYERS: LocalStyleLayers = [];
 
@@ -157,12 +160,13 @@ export const useInterpolatedStylesMap = () => {
 	);
 
 	const activeScreenKey = nextScreenKey ?? currentScreenKey;
+	const { closing: activeClosing, entering: activeEntering } =
+		AnimationStore.getBag(activeScreenKey);
 	const {
-		entering: activeEntering,
-		transitionProgress: activeTransitionProgress,
-	} = AnimationStore.getBag(activeScreenKey);
-	const { pendingLifecycleRequestKind: activePendingLifecycleRequestKind } =
-		SystemStore.getBag(activeScreenKey);
+		animationProgress: activeAnimationProgress,
+		pendingLifecycleRequestKind: activePendingLifecycleRequestKind,
+		pendingLifecycleStartBlockCount: activePendingLifecycleStartBlockCount,
+	} = SystemStore.getBag(activeScreenKey);
 
 	const isGesturingDuringCloseAnimation = useSharedValue(false);
 
@@ -194,22 +198,33 @@ export const useInterpolatedStylesMap = () => {
 		const isInGestureMode =
 			!!isDragging || isGesturingDuringCloseAnimation.get();
 
-		// The current screen keeps interpolator ownership until the next screen is
-		// genuinely live: never during a gesture-driven close, never before a next
-		// interpolator exists, and never in the next screen's pre-start window
-		// (entering, but no transformed frame yet). Only then does "next" take over.
+		// Interpolator ownership changes only at visual boundaries on the UI thread:
+		// the next screen attaches after its blockers clear and progress starts, then
+		// detaches once its closing progress has committed at zero. The downstream
+		// resolver sees the owner disappear in this same graph and resets its styles
+		// without waiting for React to remove the screen.
 		const isPendingOpen =
 			activePendingLifecycleRequestKind.get() ===
 			LifecycleTransitionRequestKind.Open;
 		const activeOpening = isPendingOpen || !!activeEntering.get();
+		const isOpeningBlocked = isOpenTransitionBlocked({
+			opening: activeOpening,
+			pendingLifecycleStartBlockCount:
+				activePendingLifecycleStartBlockCount.get(),
+			animationProgress: activeAnimationProgress.get(),
+		});
+		const hasCloseFinished = hasCloseTransitionFinished({
+			closing: activeClosing.get(),
+			animationProgress: activeAnimationProgress.get(),
+		});
 		const currentOwnsInterpolator =
 			isInGestureMode ||
 			!nextInterpolator ||
-			isOpeningBeforeStart(
-				activeOpening ? 1 : 0,
-				activeTransitionProgress.get(),
-			);
-		nextInterpolatorReady.set(currentOwnsInterpolator ? 0 : 1);
+			isOpeningBlocked ||
+			hasCloseFinished;
+		const nextReady = currentOwnsInterpolator ? 0 : 1;
+
+		nextInterpolatorReady.set(nextReady);
 
 		const interpolatorOptionsOwner = currentOwnsInterpolator
 			? "current"

package/src/shared/providers/screen/styles/hooks/use-maybe-block-visibility.tsx

@@ -9,15 +9,18 @@ import { AnimationStore } from "../../../../stores/animation.store";
 import { SystemStore } from "../../../../stores/system.store";
 import { getVisibilityBlockOffset } from "../../../../utils/visibility-block-offset";
 import { useDescriptorDerivations } from "../../descriptors";
+import { hasCloseTransitionFinished } from "../helpers/transition-visual-state";
 import { resolveScreenVisibilityGate } from "../helpers/visibility-gate";
 
 export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const { height } = useWindowDimensions();
 	const { currentScreenKey } = useDescriptorDerivations();
-	const { closing, entering, progressAnimating, transitionProgress } =
-		AnimationStore.getBag(currentScreenKey);
-	const { pendingLifecycleStartBlockCount, pendingLifecycleRequestKind } =
-		SystemStore.getBag(currentScreenKey);
+	const { closing, entering } = AnimationStore.getBag(currentScreenKey);
+	const {
+		animationProgress,
+		pendingLifecycleStartBlockCount,
+		pendingLifecycleRequestKind,
+	} = SystemStore.getBag(currentScreenKey);
 
 	const hasVisibilityGateOpened = useSharedValue(false);
 	const shouldBlockVisibility = useSharedValue(!isFloatingOverlay);
@@ -31,7 +34,7 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 				hasVisibilityGateOpened: hasVisibilityGateOpened.get(),
 				pendingLifecycleStartBlockCount: pendingLifecycleStartBlockCount.get(),
 				pendingLifecycleRequestKind: pendingLifecycleRequestKind.get(),
-				progress: transitionProgress.get(),
+				animationProgress: animationProgress.get(),
 				entering: entering.get(),
 			});
 		},
@@ -49,14 +52,12 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const animatedStyle = useAnimatedStyle(() => {
 		"worklet";
 		const offset = getVisibilityBlockOffset(height);
-		// Keep opacity out of normal rendering so effects such as Liquid Glass
-		// retain native compositing. Once closing has fully finished, hiding the
-		// outgoing screen lets the handoff settle before React removes its host.
-		const shouldHideClosedScreen =
-			closing.get() === 1 &&
-			transitionProgress.get() <= 0 &&
-			progressAnimating.get() === 0;
-
+		// Hide the outgoing screen after its visual close while React removes its
+		// host asynchronously.
+		const shouldHideClosedScreen = hasCloseTransitionFinished({
+			closing: closing.get(),
+			animationProgress: animationProgress.get(),
+		});
 		if (shouldHideClosedScreen) {
 			return {
 				opacity: 0,

package/src/shared/stores/bounds/internals/links.ts

@@ -215,11 +215,12 @@ const writeDestination = (
 	bounds: MeasuredDimensions,
 	styles: StyleProps,
 	group?: GroupKey,
+	runtimeFlags: BoundaryRuntimeFlags = {},
 ) => {
 	"worklet";
 	const existingLink = getPairLink(state, pairKey, linkKey);
 
-	const destination = createLinkSide(screenKey, bounds, styles);
+	const destination = createLinkSide(screenKey, bounds, styles, runtimeFlags);
 	const link =
 		existingLink ??
 		({
@@ -296,12 +297,22 @@ function setDestination(
 	bounds: MeasuredDimensions,
 	styles: StyleProps = {},
 	group?: GroupKey,
+	runtimeFlags: BoundaryRuntimeFlags = {},
 ) {
 	"worklet";
 	pairs.modify(<T extends LinkPairsState>(state: T): T => {
 		"worklet";
 		const linkKey = getLinkKeyFromTag(tag);
-		writeDestination(state, pairKey, linkKey, screenKey, bounds, styles, group);
+		writeDestination(
+			state,
+			pairKey,
+			linkKey,
+			screenKey,
+			bounds,
+			styles,
+			group,
+			runtimeFlags,
+		);
 
 		return state;
 	});

package/src/shared/stores/scroll.store.ts

@@ -137,6 +137,29 @@ export const getClampedScrollAxisDelta = (
 	return currentOffset - capturedOffset;
 };
 
+/**
+ * Visual scroll travel from a bounds snapshot normalized to its at-rest
+ * position. The captured side is clamped because measurement removes transient
+ * rubber-band displacement; the current side stays raw so consumers can follow
+ * the position that is actually visible on iOS.
+ */
+export const getVisualScrollAxisDelta = (
+	current: ScrollMetadataState | null | undefined,
+	captured: ScrollMetadataState | null | undefined,
+	axis: ScrollGestureAxis,
+): number => {
+	"worklet";
+
+	const currentAxisState = current?.[axis];
+	const capturedOffset = clampScrollAxisOffset(captured?.[axis]);
+
+	if (!currentAxisState || capturedOffset === null) {
+		return 0;
+	}
+
+	return currentAxisState.offset - capturedOffset;
+};
+
 /**
  * Route-keyed scroll geometry used by gesture activation and bounds measurement.
  * Coordination tracks gesture-owner scoped ScrollView offsets and dimensions;

package/src/shared/stores/system.store.ts

@@ -16,6 +16,12 @@ export enum LifecycleTransitionRequestKind {
 type SystemStoreState = {
 	targetProgress: SharedValue<number>;
 
+	/**
+	 * Directional linear clock for the active progress animation. Increasing
+	 * animations run 0 -> 1; decreasing animations run 1 -> 0.
+	 */
+	animationProgress: SharedValue<number>;
+
 	/**
 	 * Resolved fraction (contentHeight / screenHeight) for the 'auto' snap point. -1 = not yet measured.
 	 */
@@ -67,6 +73,7 @@ export type SystemStoreMap = SystemStoreState & {
 export const SystemStore = createStore<SystemStoreState, SystemStoreActions>({
 	createBag: () => ({
 		targetProgress: makeMutable(1),
+		animationProgress: makeMutable(0),
 		resolvedAutoSnapPoint: makeMutable(-1),
 		measuredContentLayout: makeMutable<Layout | null>(null),
 		pendingLifecycleRequestKind: makeMutable<LifecycleTransitionRequestKind>(
@@ -77,6 +84,7 @@ export const SystemStore = createStore<SystemStoreState, SystemStoreActions>({
 	}),
 	disposeBag: (bag) => {
 		cancelAnimation(bag.targetProgress);
+		cancelAnimation(bag.animationProgress);
 		cancelAnimation(bag.resolvedAutoSnapPoint);
 		cancelAnimation(bag.measuredContentLayout);
 		cancelAnimation(bag.pendingLifecycleRequestKind);