react-native-screen-transitions 3.8.0 → 3.9.0-alpha.1

package/src/shared/configs/presets.ts

@@ -434,12 +434,10 @@ export const SharedAppleMusic = ({
 			const dragXScale = interpolate(normX, [0, 1], xScaleOuput);
 			const dragYScale = interpolate(normY, [0, 1], yScaleOuput);
 
-			const boundValues = bounds({
-				id: sharedBoundTag,
+			const boundValues = bounds({ id: sharedBoundTag }).math({
 				method: focused ? "content" : "transform",
 				anchor: "top",
 				scaleMode: "uniform",
-				raw: true,
 			});
 
 			const opacity = interpolate(
@@ -455,12 +453,10 @@ export const SharedAppleMusic = ({
 			 * ===============================
 			 */
 			if (focused) {
-				const maskedValues = bounds({
-					id: sharedBoundTag,
+				const maskedValues = bounds({ id: sharedBoundTag }).math({
 					space: "absolute",
 					method: "size",
 					target: "fullscreen",
-					raw: true,
 				});
 
 				// Apple Music style drop shadow that increases with drag magnitude

package/src/shared/hooks/navigation/use-stack.tsx

@@ -5,10 +5,14 @@ import {
 	useCallback,
 	useContext,
 	useLayoutEffect,
+	useMemo,
 	useRef,
 	useSyncExternalStore,
 } from "react";
+import { useDerivedValue } from "react-native-reanimated";
+import { syncStackProgressValues } from "../../providers/screen/animation/helpers/stack-progress";
 import type { StackCoreContextValue } from "../../providers/stack/core.provider";
+import { AnimationStore } from "../../stores/animation.store";
 import type { OverlayProps } from "../../types/overlay.types";
 import type {
 	BaseStackDescriptor,
@@ -87,6 +91,30 @@ const createStackStore = (
 const StackContext = createContext<StackStoreApi | null>(null);
 StackContext.displayName = "Stack";
 
+function StackProgressOwner({ routeKeys }: { routeKeys: string[] }) {
+	const visualProgressValues = useMemo(
+		() =>
+			routeKeys.map((routeKey) =>
+				AnimationStore.getValue(routeKey, "visualProgress"),
+			),
+		[routeKeys],
+	);
+
+	const stackProgressValues = useMemo(
+		() =>
+			routeKeys.map((routeKey) =>
+				AnimationStore.getValue(routeKey, "stackProgress"),
+			),
+		[routeKeys],
+	);
+
+	useDerivedValue(() => {
+		syncStackProgressValues(visualProgressValues, stackProgressValues);
+	});
+
+	return null;
+}
+
 export function StackProvider({
 	children,
 	value,
@@ -116,7 +144,10 @@ export function StackProvider({
 	});
 
 	return (
-		<StackContext.Provider value={store}>{children}</StackContext.Provider>
+		<StackContext.Provider value={store}>
+			<StackProgressOwner routeKeys={value.routeKeys} />
+			{children}
+		</StackContext.Provider>
 	);
 }
 

package/src/shared/index.ts

@@ -1,11 +1,8 @@
 import { FlatList, Pressable, ScrollView, View } from "react-native";
 import { withScreenTransitions } from "./adapters/with-screen-transitions";
-import {
-	Boundary,
-	createBoundaryComponent,
-} from "./components/create-boundary-component";
+import { Boundary, createBoundaryComponent } from "./components/boundary";
 import { createTransitionAwareComponent } from "./components/create-transition-aware-component";
-import MaskedView from "./components/integrations/masked-view";
+import MaskedView from "./components/masked-view";
 import { Presets, Specs } from "./configs";
 
 export default {
@@ -29,6 +26,11 @@ export default {
 export type { NativeStackAdapterOptions } from "./adapters/with-screen-transitions";
 export { withScreenTransitions } from "./adapters/with-screen-transitions";
 export { snapTo } from "./animation/snap-to";
+export type {
+	BoundaryPortal,
+	BoundaryPortalAttachTarget,
+	BoundaryPortalOptions,
+} from "./components/boundary";
 export {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
@@ -51,7 +53,12 @@ export {
 export type {
 	AnimatedViewStyle,
 	AnimationConfig,
+	BoundaryTeleportControl,
+	BoundsMotion,
+	BoundsMotionFrame,
+	BoundsMotionTransform,
 	BoundsNavigationAccessor,
+	BoundsNavigationRevealOptions,
 	BoundsNavigationRevealStyle,
 	BoundsNavigationZoomOpacityRange,
 	BoundsNavigationZoomOpacityRanges,
@@ -72,6 +79,7 @@ export type {
 	ScrollGestureState,
 	ScrollMetadataState,
 	TransitionInterpolatedStyle,
+	TransitionSlotProps,
 	TransitionSlotStyle,
 	TransitionSpec,
 } from "./types";

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

@@ -1,7 +1,11 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import { setEntry } from "../../stores/bounds/internals/entries";
 import { setDestination, setSource } from "../../stores/bounds/internals/links";
-import type { ScreenPairKey } from "../../stores/bounds/types";
+import type {
+	BoundsPortalAttachTarget,
+	ScreenPairKey,
+	SourceHostRef,
+} from "../../stores/bounds/types";
 
 type LinkWrite =
 	| {
@@ -21,6 +25,8 @@ type ApplyMeasuredBoundsWritesParams = {
 	measured: MeasuredDimensions;
 	preparedStyles: StyleProps;
 	linkWrite?: LinkWrite;
+	portalHost?: BoundsPortalAttachTarget;
+	sourceHost?: SourceHostRef;
 };
 
 export const applyMeasuredBoundsWrites = (
@@ -35,6 +41,8 @@ export const applyMeasuredBoundsWrites = (
 		measured,
 		preparedStyles,
 		linkWrite,
+		portalHost,
+		sourceHost,
 	} = params;
 
 	// Set the bounds entry on every measure to avoid any stale measurements
@@ -51,6 +59,8 @@ export const applyMeasuredBoundsWrites = (
 			measured,
 			preparedStyles,
 			group,
+			portalHost,
+			sourceHost,
 		);
 	}
 

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state/types.ts

@@ -11,6 +11,7 @@ import type { BaseStackRoute } from "../../../../../types/stack.types";
 export type BuiltState = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
+	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import {
 	type DerivedValue,
@@ -9,7 +8,6 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { DEFAULT_SCREEN_TRANSITION_STATE } from "../../../../constants";
 import { useStack } from "../../../../hooks/navigation/use-stack";
-import { AnimationStore } from "../../../../stores/animation.store";
 import type {
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
@@ -20,7 +18,7 @@ import { updateDerivations } from "./derivations";
 import { hasTransitionsEnabled } from "./has-transitions-enabled";
 import { hydrateTransitionState } from "./hydrate-transition-state";
 import type { SelectedInterpolatorOptions } from "./selected-interpolator-options";
-import { deriveStackProgress } from "./stack-progress";
+import { resolveStackProgress } from "./stack-progress";
 import { useBuildTransitionState } from "./use-build-transition-state";
 
 export type ScreenInterpolatorFrame = Omit<
@@ -61,10 +59,11 @@ const createInitialBaseInterpolatorProps = (
 };
 
 export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
-	const { flags, routeKeys } = useStack();
+	const transitionsAlwaysOn = useStack(
+		(stack) => stack.flags.TRANSITIONS_ALWAYS_ON,
+	);
 	const dimensions = useWindowDimensions();
 	const insets = useSafeAreaInsets();
-	const transitionsAlwaysOn = flags.TRANSITIONS_ALWAYS_ON;
 
 	const {
 		current: currDescriptor,
@@ -76,14 +75,6 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	const nextAnimation = useBuildTransitionState(nextDescriptor);
 	const prevAnimation = useBuildTransitionState(prevDescriptor);
 
-	const currentRouteKey = currDescriptor?.route?.key;
-	const currentIndex = routeKeys.indexOf(currentRouteKey);
-	const visualProgressValues = useMemo(() => {
-		return routeKeys.map((routeKey) =>
-			AnimationStore.getValue(routeKey, "visualProgress"),
-		);
-	}, [routeKeys]);
-
 	const nextRouteKey = nextDescriptor?.route?.key;
 	const nextHasTransitions =
 		!!nextRouteKey &&
@@ -110,6 +101,11 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 				interpolatorOptions.owner === "next" &&
 				!!nextAnimation &&
 				nextHasTransitions;
+			const previousCurrentProgress = currentAnimation?.visualProgress.get();
+			const previousNextProgress =
+				nextAnimation && nextHasTransitions
+					? nextAnimation.visualProgress.get()
+					: undefined;
 
 			frame.previous = prevAnimation
 				? hydrateTransitionState(prevAnimation, dimensions)
@@ -141,15 +137,13 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 
 			updateDerivations(frame);
 
-			frame.stackProgress = deriveStackProgress(
-				routeKeys,
-				visualProgressValues,
-				currentIndex,
+			frame.stackProgress = resolveStackProgress(
+				currentAnimation?.stackProgress,
 				frame.progress,
-				currentRouteKey,
 				frame.current.progress,
-				nextRouteKey,
+				previousCurrentProgress,
 				frame.next?.progress,
+				previousNextProgress,
 			);
 			frame.logicallySettled = frame.active.settled;
 

package/src/shared/providers/screen/animation/helpers/stack-progress.ts

@@ -1,28 +1,43 @@
 import type { SharedValue } from "react-native-reanimated";
 
-export const deriveStackProgress = (
-	routeKeys: string[],
+export const syncStackProgressValues = (
 	visualProgressValues: SharedValue<number>[],
-	currentIndex: number,
+	stackProgressValues: SharedValue<number>[],
+) => {
+	"worklet";
+	let total = 0;
+
+	for (let i = visualProgressValues.length - 1; i >= 0; i--) {
+		total += visualProgressValues[i]?.get() ?? 0;
+		const stackProgress = stackProgressValues[i];
+
+		if (stackProgress && stackProgress.get() !== total) {
+			stackProgress.set(total);
+		}
+	}
+};
+
+export const resolveStackProgress = (
+	stackProgress: SharedValue<number> | undefined,
 	fallbackProgress: number,
-	currentRouteKey: string | undefined,
 	currentProgress: number,
-	nextRouteKey: string | undefined,
+	previousCurrentProgress: number | undefined,
 	nextProgress: number | undefined,
+	previousNextProgress: number | undefined,
 ) => {
 	"worklet";
-	if (currentIndex < 0) return fallbackProgress;
+	if (!stackProgress) {
+		return fallbackProgress;
+	}
 
-	let total = 0;
-	for (let i = currentIndex; i < visualProgressValues.length; i++) {
-		const routeKey = routeKeys[i];
-		if (routeKey === currentRouteKey) {
-			total += currentProgress;
-		} else if (routeKey === nextRouteKey && nextProgress !== undefined) {
-			total += nextProgress;
-		} else {
-			total += visualProgressValues[i].get();
-		}
+	let total = stackProgress.get();
+
+	if (previousCurrentProgress !== undefined) {
+		total += currentProgress - previousCurrentProgress;
+	}
+
+	if (nextProgress !== undefined && previousNextProgress !== undefined) {
+		total += nextProgress - previousNextProgress;
 	}
 
 	return total;

package/src/shared/providers/screen/animation/helpers/use-build-transition-state.ts

@@ -22,6 +22,7 @@ import { toPlainRoute, toPlainValue } from "./worklet";
 type BuiltState = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
+	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
@@ -67,6 +68,7 @@ export const useBuildTransitionState = (
 		return {
 			transitionProgress: AnimationStore.getValue(key, "transitionProgress"),
 			visualProgress: AnimationStore.getValue(key, "visualProgress"),
+			stackProgress: AnimationStore.getValue(key, "stackProgress"),
 			willAnimate: AnimationStore.getValue(key, "willAnimate"),
 			closing: AnimationStore.getValue(key, "closing"),
 			entering: AnimationStore.getValue(key, "entering"),

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

@@ -4,7 +4,7 @@ import type { BaseStackDescriptor } from "../../../types/stack.types";
 import createProvider from "../../../utils/create-provider";
 import type { DescriptorDerivations } from "./helpers/derive-descriptor-derivations";
 import { deriveDescriptorDerivations } from "./helpers/derive-descriptor-derivations";
-import { getAncestorKeys } from "./helpers/get-ancestor-keys";
+import { getAncestorKeyState } from "./helpers/get-ancestor-keys";
 
 /**
  * Base descriptor interface - minimal contract for all stack types.
@@ -49,7 +49,10 @@ const {
 		[previous, current, next],
 	);
 
-	const ancestorKeys = useMemo(() => getAncestorKeys(current), [current]);
+	const { ancestorKeys, ancestorDestinationPairKey } = useMemo(
+		() => getAncestorKeyState(current),
+		[current],
+	);
 
 	const derivations = useMemo(
 		() =>
@@ -58,8 +61,9 @@ const {
 				current,
 				next,
 				ancestorKeys,
+				ancestorDestinationPairKey,
 			}),
-		[previous, current, next, ancestorKeys],
+		[previous, current, next, ancestorKeys, ancestorDestinationPairKey],
 	);
 
 	const value = useMemo(

package/src/shared/providers/screen/descriptors/helpers/derive-descriptor-derivations.ts

@@ -1,9 +1,14 @@
+import { createScreenPairKey } from "../../../../stores/bounds/helpers/link-pairs.helpers";
+import type { ScreenPairKey } from "../../../../stores/bounds/types";
 import type { BaseStackDescriptor } from "../../../../types/stack.types";
 
 export interface DescriptorDerivations {
 	previousScreenKey?: string;
 	currentScreenKey: string;
 	nextScreenKey?: string;
+	sourcePairKey?: ScreenPairKey;
+	destinationPairKey?: ScreenPairKey;
+	ancestorDestinationPairKey?: ScreenPairKey;
 	parentScreenKey?: string;
 	isFirstKey: boolean;
 	isTopMostScreen: boolean;
@@ -16,6 +21,7 @@ interface Params {
 	current: BaseStackDescriptor;
 	next?: BaseStackDescriptor;
 	ancestorKeys: string[];
+	ancestorDestinationPairKey?: ScreenPairKey;
 }
 
 export function deriveDescriptorDerivations({
@@ -23,10 +29,17 @@ export function deriveDescriptorDerivations({
 	current,
 	next,
 	ancestorKeys,
+	ancestorDestinationPairKey,
 }: Params): DescriptorDerivations {
 	const previousScreenKey = previous?.route.key;
 	const currentScreenKey = current.route.key;
 	const nextScreenKey = next?.route.key;
+	const sourcePairKey = nextScreenKey
+		? createScreenPairKey(currentScreenKey, nextScreenKey)
+		: undefined;
+	const destinationPairKey = previousScreenKey
+		? createScreenPairKey(previousScreenKey, currentScreenKey)
+		: undefined;
 
 	const navigationState = current.navigation.getState();
 	const routes = navigationState?.routes ?? [];
@@ -41,6 +54,9 @@ export function deriveDescriptorDerivations({
 		previousScreenKey,
 		currentScreenKey,
 		nextScreenKey,
+		sourcePairKey,
+		destinationPairKey,
+		ancestorDestinationPairKey,
 		parentScreenKey: ancestorKeys[0],
 		isFirstKey,
 		isTopMostScreen,

package/src/shared/providers/screen/descriptors/helpers/get-ancestor-keys.ts

@@ -1,16 +1,26 @@
+import { createScreenPairKey } from "../../../../stores/bounds/helpers/link-pairs.helpers";
+import type { ScreenPairKey } from "../../../../stores/bounds/types";
 import type { BaseStackDescriptor } from "../../../../types/stack.types";
 
+export interface AncestorKeyState {
+	ancestorKeys: string[];
+	ancestorDestinationPairKey?: ScreenPairKey;
+}
+
 /**
- * Builds the full ancestor key chain for nested navigators.
- * Returns an array of screen keys from immediate parent to root.
- * [parentKey, grandparentKey, greatGrandparentKey, ...]
+ * Builds nested navigator ancestor keys from immediate parent to root.
+ * The nearest ancestor destination pair lets child routes attach measurements
+ * to the transition owned by the parent stack.
  */
-export function getAncestorKeys(current: BaseStackDescriptor): string[] {
+export function getAncestorKeyState(
+	current: BaseStackDescriptor,
+): AncestorKeyState {
 	const ancestors: string[] = [];
+	let ancestorDestinationPairKey: ScreenPairKey | undefined;
 	const nav = current.navigation as any;
 
 	if (typeof nav?.getParent !== "function") {
-		return ancestors;
+		return { ancestorKeys: ancestors };
 	}
 
 	let parent = nav.getParent();
@@ -21,10 +31,25 @@ export function getAncestorKeys(current: BaseStackDescriptor): string[] {
 			const focusedRoute = state.routes[state.index];
 			if (focusedRoute?.key) {
 				ancestors.push(focusedRoute.key);
+
+				const previousRoute = state.routes[state.index - 1];
+				if (!ancestorDestinationPairKey && previousRoute?.key) {
+					ancestorDestinationPairKey = createScreenPairKey(
+						previousRoute.key,
+						focusedRoute.key,
+					);
+				}
 			}
 		}
 		parent = parent.getParent();
 	}
 
-	return ancestors;
+	return {
+		ancestorKeys: ancestors,
+		ancestorDestinationPairKey,
+	};
+}
+
+export function getAncestorKeys(current: BaseStackDescriptor): string[] {
+	return getAncestorKeyState(current).ancestorKeys;
 }

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

@@ -0,0 +1,38 @@
+import { StyleSheet, type View } from "react-native";
+import Animated, {
+	type AnimatedRef,
+	useAnimatedRef,
+} from "react-native-reanimated";
+import createProvider from "../../utils/create-provider";
+
+interface Props {
+	children: React.ReactNode;
+}
+interface ContextValue {
+	originRef: AnimatedRef<View>;
+}
+
+export const { OriginProvider, useOriginContext } = createProvider("Origin", {
+	guarded: true,
+})<Props, ContextValue>(({ children }) => {
+	const originRef = useAnimatedRef<View>();
+
+	return {
+		value: {
+			originRef,
+		},
+		children: (
+			<Animated.View
+				style={styles.container}
+				collapsable={false}
+				ref={originRef}
+			>
+				{children}
+			</Animated.View>
+		),
+	};
+});
+
+const styles = StyleSheet.create({
+	container: { flex: 1 },
+});

package/src/shared/providers/screen/styles/constants.ts

@@ -1,3 +1,4 @@
+import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../components/boundary/portal/utils/naming";
 import {
 	NAVIGATION_MASK_CONTAINER_STYLE_ID,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
@@ -59,6 +60,7 @@ export const STYLE_RESET_VALUES: Record<string, unknown> = {
 };
 
 export const PROP_RESET_VALUES: Record<string, unknown> = {
+	hostName: PORTAL_HOST_NAME_RESET_VALUE,
 	pointerEvents: "auto",
 };
 

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/are-resettable-states-equal.ts

@@ -0,0 +1,74 @@
+import type { ResettableStyleStatesBySlot } from "./types";
+
+const areRecordsEqual = (
+	left: Record<string, unknown> | undefined,
+	right: Record<string, unknown> | undefined,
+) => {
+	"worklet";
+	if (left === right) {
+		return true;
+	}
+
+	if (!left || !right) {
+		return false;
+	}
+
+	for (const key in left) {
+		if (left[key] !== right[key]) {
+			return false;
+		}
+	}
+
+	for (const key in right) {
+		if (!(key in left)) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
+const areResettableStatesEqual = (
+	left: ResettableStyleStatesBySlot[string] | undefined,
+	right: ResettableStyleStatesBySlot[string] | undefined,
+) => {
+	"worklet";
+	if (left === right) {
+		return true;
+	}
+
+	if (!left || !right) {
+		return false;
+	}
+
+	return (
+		areRecordsEqual(left.styleKeys, right.styleKeys) &&
+		areRecordsEqual(left.styleResetValues, right.styleResetValues) &&
+		areRecordsEqual(left.propKeys, right.propKeys) &&
+		areRecordsEqual(left.propResetValues, right.propResetValues)
+	);
+};
+
+export const areResettableStatesBySlotEqual = (
+	left: ResettableStyleStatesBySlot,
+	right: ResettableStyleStatesBySlot,
+) => {
+	"worklet";
+	if (left === right) {
+		return true;
+	}
+
+	for (const slotId in left) {
+		if (!areResettableStatesEqual(left[slotId], right[slotId])) {
+			return false;
+		}
+	}
+
+	for (const slotId in right) {
+		if (!(slotId in left)) {
+			return false;
+		}
+	}
+
+	return true;
+};

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/index.ts

@@ -11,6 +11,7 @@ import type {
 	ResettableStyleStatesBySlot,
 } from "./types";
 
+export { areResettableStatesBySlotEqual } from "./are-resettable-states-equal";
 export type { LocalStyleLayers, ResettableStyleStatesBySlot } from "./types";
 
 type ResolveSlotStylesContext = {

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

@@ -88,5 +88,6 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	return {
 		animatedStyle,
 		animatedProps,
+		shouldBlockVisibility,
 	};
 };

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

@@ -15,6 +15,7 @@ type Props = {
 
 type ScreenStylesContextValue = {
 	stylesMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
+	shouldBlockVisibility: SharedValue<boolean>;
 };
 
 export const {
@@ -28,17 +29,18 @@ export const {
 
 	const rawStylesMaps = useInterpolatedStylesMap();
 
+	const { animatedStyle, animatedProps, shouldBlockVisibility } =
+		useMaybeBlockVisibility(isFloatingOverlay);
+
 	const stylesMap = useResolvedStylesMap({
 		localStylesMaps: rawStylesMaps,
 		ancestorStylesMap: parentContext?.stylesMap,
 	});
 
-	const { animatedStyle, animatedProps } =
-		useMaybeBlockVisibility(isFloatingOverlay);
-
 	return {
 		value: {
 			stylesMap,
+			shouldBlockVisibility,
 		},
 		children: (
 			<FloatingOverlayLayer enabled={isFloatingOverlay}>

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

@@ -8,6 +8,7 @@ import { createStore } from "../utils/create-store";
 export type AnimationStoreMap = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
+	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
 	progressSettled: SharedValue<number>;
@@ -19,6 +20,7 @@ function createAnimationBag(): AnimationStoreMap {
 	return {
 		transitionProgress: makeMutable(0),
 		visualProgress: makeMutable(0),
+		stackProgress: makeMutable(0),
 		willAnimate: makeMutable(0),
 		closing: makeMutable(0),
 		progressAnimating: makeMutable(0),
@@ -37,6 +39,7 @@ export const AnimationStore = createStore<AnimationStoreMap>({
 	disposeBag: (bag) => {
 		cancelAnimation(bag.transitionProgress);
 		cancelAnimation(bag.visualProgress);
+		cancelAnimation(bag.stackProgress);
 		cancelAnimation(bag.willAnimate);
 		cancelAnimation(bag.progressAnimating);
 		cancelAnimation(bag.progressSettled);