react-native-screen-transitions 3.6.0-alpha.0 → 3.6.0-alpha.1

package/src/shared/utils/bounds/helpers/prepare-bound-styles.ts

@@ -4,7 +4,7 @@ import {
 	setGroupActiveId,
 } from "../../../stores/bounds/internals/groups";
 import type { ResolvedTransitionPair } from "../../../stores/bounds/types";
-import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import type { BoundsInterpolationProps } from "../../../types/bounds.types";
 import { DEFAULT_BOUNDS_OPTIONS } from "../constants";
 import type {
 	BoundId,
@@ -14,7 +14,7 @@ import type {
 import { createBoundTag } from "./create-bound-tag";
 import { computeBoundStyles } from "./styles/compute";
 
-type BaseInterpolatorProps = Omit<ScreenInterpolationProps, "bounds">;
+type BaseInterpolatorProps = BoundsInterpolationProps;
 
 type ComputeResolvedBoundsStylesParams<T extends BoundsOptions> = {
 	props: BaseInterpolatorProps;
@@ -24,7 +24,7 @@ type ComputeResolvedBoundsStylesParams<T extends BoundsOptions> = {
 };
 
 type BuildBoundsOptionsParams = {
-	props: Omit<ScreenInterpolationProps, "bounds">;
+	props: BoundsInterpolationProps;
 	id?: BoundId;
 	group?: string;
 	overrides?: Partial<BoundsOptions>;

package/src/shared/utils/bounds/navigation/math.ts

@@ -1,23 +1,7 @@
-import { interpolate } from "react-native-reanimated";
+import { clamp, interpolate } from "react-native-reanimated";
 
 type CombinedScaleMode = "multiply" | "average" | "max" | "min";
 
-const clamp = (value: number, min: number, max: number): number => {
-	"worklet";
-	const lower = min < max ? min : max;
-	const upper = max > min ? max : min;
-
-	if (value < lower) return lower;
-	if (value > upper) return upper;
-
-	return value;
-};
-
-const clamp01 = (value: number): number => {
-	"worklet";
-	return clamp(value, 0, 1);
-};
-
 const lerp = (from: number, to: number, t: number): number => {
 	"worklet";
 	return from + (to - from) * t;
@@ -46,7 +30,7 @@ const mapRangeClamped = (
 	outMax: number,
 ): number => {
 	"worklet";
-	const t = clamp01(inverseLerp(value, inMin, inMax));
+	const t = clamp(inverseLerp(value, inMin, inMax), 0, 1);
 	return lerp(outMin, outMax, t);
 };
 

package/src/shared/utils/bounds/navigation/reveal/build.ts

@@ -1,47 +1,56 @@
-import { interpolate } from "react-native-reanimated";
+import { interpolate, type MeasuredDimensions } from "react-native-reanimated";
 import {
 	EPSILON,
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 } from "../../../../constants";
 import { createLinkAccessor } from "../../helpers/create-link-accessor";
+import { computeContentTransformGeometry } from "../../helpers/geometry";
 import { getSourceBorderRadius } from "../helpers";
+import { combineScales, resolveDirectionalDragScale } from "../math";
 import {
-	combineScales,
-	composeCompensatedTranslation,
-	computeCenterScaleShift,
-	resolveDirectionalDragScale,
-} from "../math";
-import {
+	CLOSE_SOURCE_HANDOFF_PROGRESS,
+	DISMISS_SCALE_ORBIT_DEPTH,
+	DRAG_DIRECTIONAL_SCALE_EXPONENT,
+	DRAG_DIRECTIONAL_SCALE_MAX,
+	DRAG_DIRECTIONAL_SCALE_MIN,
+	DRAG_MASK_HEIGHT_COLLAPSE_END,
+	HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE,
 	REVEAL_BORDER_RADIUS,
-	ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
-	ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
-	ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
-	ZOOM_DRAG_TRANSLATION_EXPONENT,
-	ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
-	ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
-	ZOOM_SHARED_OPTIONS,
 } from "./config";
 import { resolveDirectionalDragTranslation } from "./math";
 import type { BuildRevealStylesParams, RevealInterpolatedStyle } from "./types";
 
 const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1] as const;
 
+function resolveUniformScale({
+	sourceWidth,
+	sourceHeight,
+	destinationWidth,
+	destinationHeight,
+}: {
+	sourceWidth: number;
+	sourceHeight: number;
+	destinationWidth: number;
+	destinationHeight: number;
+}) {
+	"worklet";
+
+	const sx = sourceWidth / destinationWidth;
+	const sy = sourceHeight / destinationHeight;
+
+	const sourceAspect = sourceWidth / sourceHeight;
+	const destinationAspect = destinationWidth / destinationHeight;
+	const aspectDifference = Math.abs(sourceAspect - destinationAspect);
+
+	return aspectDifference < 0.1 ? Math.max(sx, sy) : Math.min(sx, sy);
+}
+
 function resolveRevealGestureHandoff(rawDrag: number) {
 	"worklet";
 
-	const gestureSensitivity = interpolate(
-		rawDrag,
-		[0, 0.25, 0.7],
-		[0.9, 0.62, 0.28],
-		"clamp",
-	);
+	const gestureSensitivity = interpolate(rawDrag, [0, 1], [0.8, 0.1], "clamp");
 
-	const releaseBoost = interpolate(
-		rawDrag,
-		[0, 0.35, 1],
-		[1, 1.35, 1.75],
-		"clamp",
-	);
+	const releaseBoost = interpolate(rawDrag, [0, 1], [1, 1.4], "clamp");
 
 	const releaseSensitivity = interpolate(
 		gestureSensitivity,
@@ -56,6 +65,130 @@ function resolveRevealGestureHandoff(rawDrag: number) {
 	};
 }
 
+function resolveDismissScaleHandoff({
+	progress,
+	releaseScale,
+	targetScale,
+	rawDrag,
+}: {
+	progress: number;
+	releaseScale: number;
+	targetScale: number;
+	rawDrag: number;
+}) {
+	"worklet";
+
+	const closeProgress = 1 - progress;
+	const scaleProgress = Math.sin((Math.PI / 2) * closeProgress);
+	const baseScale = releaseScale + (targetScale - releaseScale) * scaleProgress;
+	const orbitDepth = interpolate(
+		rawDrag,
+		[0, 1],
+		[0, DISMISS_SCALE_ORBIT_DEPTH],
+		"clamp",
+	);
+	const orbitScale = 1 - orbitDepth * Math.sin(Math.PI * closeProgress);
+
+	return baseScale * orbitScale;
+}
+
+function getBoundsCenterX(bounds: MeasuredDimensions) {
+	"worklet";
+	return bounds.pageX + bounds.width / 2;
+}
+
+function getBoundsCenterY(bounds: MeasuredDimensions) {
+	"worklet";
+	return bounds.pageY + bounds.height / 2;
+}
+
+function resolveRevealContentBaseTransform({
+	progress,
+	sourceBounds,
+	destinationBounds,
+	screenLayout,
+}: {
+	progress: number;
+	sourceBounds: MeasuredDimensions;
+	destinationBounds: MeasuredDimensions;
+	screenLayout: BuildRevealStylesParams["props"]["layouts"]["screen"];
+}) {
+	"worklet";
+
+	const geometry = computeContentTransformGeometry({
+		start: sourceBounds,
+		end: destinationBounds,
+		entering: true,
+		dimensions: screenLayout,
+		scaleMode: "uniform",
+	});
+
+	return {
+		translateX: interpolate(progress, [0, 1], [geometry.tx, 0], "clamp"),
+		translateY: interpolate(progress, [0, 1], [geometry.ty, 0], "clamp"),
+		scale: interpolate(progress, [0, 1], [geometry.s, 1], "clamp"),
+	};
+}
+
+function resolveTrackedSourceElementTransform({
+	sourceBounds,
+	destinationBounds,
+	contentTranslateX,
+	contentTranslateY,
+	contentScale,
+	parentScale,
+	screenWidth,
+	screenHeight,
+}: {
+	sourceBounds: MeasuredDimensions;
+	destinationBounds: MeasuredDimensions;
+	contentTranslateX: number;
+	contentTranslateY: number;
+	contentScale: number;
+	parentScale: number;
+	screenWidth: number;
+	screenHeight: number;
+}) {
+	"worklet";
+
+	const screenCenterX = screenWidth / 2;
+	const screenCenterY = screenHeight / 2;
+	const safeParentScale = Math.max(Math.abs(parentScale), EPSILON);
+	const safeSourceWidth = Math.max(Math.abs(sourceBounds.width), EPSILON);
+	const safeSourceHeight = Math.max(Math.abs(sourceBounds.height), EPSILON);
+
+	const sourceCenterX = getBoundsCenterX(sourceBounds);
+	const sourceCenterY = getBoundsCenterY(sourceBounds);
+	const destinationCenterX = getBoundsCenterX(destinationBounds);
+	const destinationCenterY = getBoundsCenterY(destinationBounds);
+
+	const trackedCenterX =
+		screenCenterX +
+		(destinationCenterX - screenCenterX) * contentScale +
+		contentTranslateX;
+	const trackedCenterY =
+		screenCenterY +
+		(destinationCenterY - screenCenterY) * contentScale +
+		contentTranslateY;
+
+	return {
+		translateX:
+			(trackedCenterX - screenCenterX) / safeParentScale +
+			screenCenterX -
+			sourceCenterX,
+		translateY:
+			(trackedCenterY - screenCenterY) / safeParentScale +
+			screenCenterY -
+			sourceCenterY,
+		scaleX:
+			(destinationBounds.width * contentScale) /
+			(safeSourceWidth * safeParentScale),
+		scaleY:
+			(destinationBounds.height * contentScale) /
+			(safeSourceHeight * safeParentScale),
+	};
+}
+
 /* -------------------------------------------------------------------------- */
 /*                              BUILD REVEAL STYLES                           */
 /* -------------------------------------------------------------------------- */
@@ -80,7 +213,7 @@ export function buildRevealStyles({
 
 	const baseRawOptions = {
 		raw: true,
-		scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
+		scaleMode: "uniform",
 	} as const;
 
 	const boundsAccessor = createLinkAccessor(() => props);
@@ -109,17 +242,17 @@ export function buildRevealStyles({
 	const dragX = resolveDirectionalDragTranslation({
 		translation: props.active.gesture.x,
 		dimension: screenLayout.width,
-		negativeMax: ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
-		positiveMax: ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
-		exponent: ZOOM_DRAG_TRANSLATION_EXPONENT,
+		negativeMax: 1,
+		positiveMax: 1,
+		exponent: 1,
 	});
 
 	const dragY = resolveDirectionalDragTranslation({
 		translation: props.active.gesture.y,
 		dimension: screenLayout.height,
-		negativeMax: ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
-		positiveMax: ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
-		exponent: ZOOM_DRAG_TRANSLATION_EXPONENT,
+		negativeMax: 1,
+		positiveMax: 1,
+		exponent: 1,
 	});
 
 	const dragXScale = isHorizontalDismiss
@@ -127,9 +260,9 @@ export function buildRevealStyles({
 				normalized: props.active.gesture.normX,
 				dismissDirection:
 					initialGesture === "horizontal-inverted" ? "negative" : "positive",
-				shrinkMin: ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
-				growMax: ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
-				exponent: ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
+				shrinkMin: DRAG_DIRECTIONAL_SCALE_MIN,
+				growMax: DRAG_DIRECTIONAL_SCALE_MAX,
+				exponent: DRAG_DIRECTIONAL_SCALE_EXPONENT,
 			})
 		: IDENTITY_DRAG_SCALE_OUTPUT[0];
 
@@ -138,16 +271,16 @@ export function buildRevealStyles({
 				normalized: props.active.gesture.normY,
 				dismissDirection:
 					initialGesture === "vertical-inverted" ? "negative" : "positive",
-				shrinkMin: ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
-				growMax: ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
-				exponent: ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
+				shrinkMin: DRAG_DIRECTIONAL_SCALE_MIN,
+				growMax: DRAG_DIRECTIONAL_SCALE_MAX,
+				exponent: DRAG_DIRECTIONAL_SCALE_EXPONENT,
 			})
 		: IDENTITY_DRAG_SCALE_OUTPUT[1];
 
 	const dragScale = combineScales(dragXScale, dragYScale);
 
 	const initialDestinationTarget =
-		focused && props.active.closing && link.initialDestination?.bounds
+		props.active.closing && link.initialDestination?.bounds
 			? link.initialDestination.bounds
 			: undefined;
 
@@ -174,38 +307,105 @@ export function buildRevealStyles({
 			"clamp",
 		);
 
-		const maskWidth = Math.max(1, maskRaw.width);
-		const maskHeight = Math.max(1, maskRaw.height);
-
+		const maskSizeMultiplier = props.active.closing
+			? interpolate(props.active.progress, [0, 1], [0.9, 1], "clamp")
+			: 1;
+
+		const maskWidth = Math.max(1, maskRaw.width * maskSizeMultiplier);
+		const maskHeight = Math.max(1, maskRaw.height * maskSizeMultiplier);
+
+		const contentBaseScale = contentRaw.scale;
+		const contentTargetBounds =
+			initialDestinationTarget ?? link.destination.bounds;
+		const sourceContentScale = resolveUniformScale({
+			sourceWidth: link.source.bounds.width,
+			sourceHeight: link.source.bounds.height,
+			destinationWidth: contentTargetBounds.width,
+			destinationHeight: contentTargetBounds.height,
+		});
+		const safeContentBaseScale =
+			Math.abs(contentBaseScale) > EPSILON ? contentBaseScale : 1;
+
+		const contentScale = props.active.gesture.dismissing
+			? resolveDismissScaleHandoff({
+					progress: props.active.progress,
+					releaseScale: dragScale,
+					targetScale: sourceContentScale,
+					rawDrag,
+				})
+			: contentBaseScale * dragScale;
 		const contentTranslateX = contentRaw.translateX + dragX;
 		const contentTranslateY = contentRaw.translateY + dragY;
-		const contentScale = contentRaw.scale * dragScale;
 
-		const maskTranslateX = maskRaw.translateX + dragX;
-		const maskTranslateY = maskRaw.translateY + dragY;
+		const liveHorizontalDismissDrag =
+			initialGesture === "horizontal-inverted"
+				? -props.active.gesture.normX
+				: props.active.gesture.normX;
 
-		const safeContentScale =
-			Math.abs(contentScale) > EPSILON ? contentScale : 1;
+		const liveVerticalDismissDrag =
+			initialGesture === "vertical-inverted"
+				? -props.active.gesture.normY
+				: props.active.gesture.normY;
+
+		const dismissProgressDrag = props.active.gesture.dismissing
+			? 1 - props.active.progress
+			: 0;
+
+		const maskHeightCollapseDrag =
+			isHorizontalDismiss || isVerticalDismiss
+				? Math.max(
+						0,
+						isHorizontalDismiss
+							? liveHorizontalDismissDrag * HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE
+							: 0,
+						isVerticalDismiss ? liveVerticalDismissDrag : 0,
+						dismissProgressDrag,
+					)
+				: 0;
+
+		const minMaskHeight = Math.min(
+			maskHeight,
+			Math.max(maskWidth, link.source.bounds.height),
+		);
+
+		const renderedMaskHeight = interpolate(
+			maskHeightCollapseDrag,
+			[0, DRAG_MASK_HEIGHT_COLLAPSE_END],
+			[maskHeight, minMaskHeight],
+			"clamp",
+		);
 
 		const maskCenterX = maskWidth / 2;
-		const maskCenterY = maskHeight / 2;
+		const maskCenterY = renderedMaskHeight / 2;
+		const maskCenteringOffsetX = (maskRaw.width - maskWidth) / 2;
+		const maskCenteringOffsetY = (maskRaw.height - maskHeight) / 2;
+		const verticalCollapseOffsetY =
+			initialGesture === "vertical-inverted"
+				? maskHeight - renderedMaskHeight
+				: 0;
 
 		const contentCenterX = screenLayout.width / 2;
 		const contentCenterY = screenLayout.height / 2;
 
+		// The mask lives inside the transformed content container. Compensate only
+		// for the reveal's base content scale; drag scale should be inherited from
+		// the same parent transform as the screen content.
 		const compensatedMaskTranslateX =
-			(maskTranslateX -
-				contentTranslateX +
-				(1 - contentScale) * (maskCenterX - contentCenterX)) /
-			safeContentScale;
+			(maskRaw.translateX -
+				contentRaw.translateX +
+				maskCenteringOffsetX +
+				(1 - contentBaseScale) * (maskCenterX - contentCenterX)) /
+			safeContentBaseScale;
 
 		const compensatedMaskTranslateY =
-			(maskTranslateY -
-				contentTranslateY +
-				(1 - contentScale) * (maskCenterY - contentCenterY)) /
-			safeContentScale;
+			(maskRaw.translateY -
+				contentRaw.translateY +
+				maskCenteringOffsetY +
+				verticalCollapseOffsetY +
+				(1 - contentBaseScale) * (maskCenterY - contentCenterY)) /
+			safeContentBaseScale;
 
-		const compensatedMaskScale = dragScale / safeContentScale;
+		const compensatedMaskScale = 1 / safeContentBaseScale;
 
 		const elementOffsetX = initialDestinationTarget
 			? initialDestinationTarget.pageX - link.destination.bounds.pageX
@@ -216,19 +416,28 @@ export function buildRevealStyles({
 			: 0;
 
 		const elementTX = props.active.closing
-			? interpolate(props.active.progress, [0, 1], [elementOffsetX, 0], "clamp")
-			: elementOffsetX;
-
+			? interpolate(
+					props.active.progress,
+					[CLOSE_SOURCE_HANDOFF_PROGRESS, 1],
+					[elementOffsetX, 0],
+					"clamp",
+				)
+			: 0;
 		const elementY = props.active.closing
-			? interpolate(props.active.progress, [0, 1], [elementOffsetY, 0], "clamp")
-			: elementOffsetY;
+			? interpolate(
+					props.active.progress,
+					[CLOSE_SOURCE_HANDOFF_PROGRESS, 1],
+					[elementOffsetY, 0],
+					"clamp",
+				)
+			: 0;
 
 		const { gestureSensitivity, gestureReleaseVelocityScale } =
 			resolveRevealGestureHandoff(rawDrag);
 
 		return {
 			options: {
-				gestureDrivesProgress: false,
+				gestureProgressMode: "freeform",
 				gestureSensitivity,
 				gestureReleaseVelocityScale,
 			},
@@ -244,13 +453,23 @@ export function buildRevealStyles({
 					shadowOpacity: interpolate(props.active.progress, [0, 1], [0, 0.25]),
 					shadowRadius: 32,
 					elevation: 5,
-					pointerEvents: props.active.logicallySettled ? "auto" : "none",
+					opacity: props.active.entering
+						? interpolate(
+								props.active.progress,
+								[0, CLOSE_SOURCE_HANDOFF_PROGRESS],
+								[0, 1],
+							)
+						: interpolate(
+								props.active.progress,
+								[0, CLOSE_SOURCE_HANDOFF_PROGRESS, 1],
+								[0, 1, 1],
+							),
 				},
 			},
 			[NAVIGATION_MASK_ELEMENT_STYLE_ID]: {
 				style: {
 					width: maskWidth,
-					height: maskHeight,
+					height: renderedMaskHeight,
 					borderRadius: props.active.settled ? 0 : maskBorderRadius,
 					borderCurve: "continuous",
 					transform: [
@@ -263,7 +482,6 @@ export function buildRevealStyles({
 			[link.id]: {
 				style: {
 					position: "relative",
-					opacity: 1,
 					zIndex: 999,
 					transform: [{ translateX: elementTX }, { translateY: elementY }],
 				},
@@ -279,72 +497,93 @@ export function buildRevealStyles({
 		[1, 0.9375],
 		"clamp",
 	);
-
-	const elementRaw = link.compute({
-		...baseRawOptions,
-		method: "transform",
-		space: "relative",
-		target: initialDestinationTarget,
+	const unfocusedContentScale = props.active.logicallySettled
+		? 1
+		: unfocusedScale;
+
+	const trackingContentTarget =
+		initialDestinationTarget ?? link.destination.bounds;
+
+	const trackingContentBaseTransform = resolveRevealContentBaseTransform({
+		progress: props.active.progress,
+		sourceBounds: link.source.bounds,
+		destinationBounds: trackingContentTarget,
+		screenLayout,
 	});
-
-	const destinationBounds = link.destination.bounds;
-	const elementCenterX = destinationBounds.pageX + destinationBounds.width / 2;
-	const elementCenterY = destinationBounds.pageY + destinationBounds.height / 2;
-
-	const scaleShiftX = computeCenterScaleShift({
-		center: elementCenterX,
-		containerCenter: screenLayout.width / 2,
-		scale: dragScale,
+	const trackingTargetScale = resolveUniformScale({
+		sourceWidth: link.source.bounds.width,
+		sourceHeight: link.source.bounds.height,
+		destinationWidth: trackingContentTarget.width,
+		destinationHeight: trackingContentTarget.height,
 	});
-
-	const scaleShiftY = computeCenterScaleShift({
-		center: elementCenterY,
-		containerCenter: screenLayout.height / 2,
-		scale: dragScale,
-	});
-
-	const compensatedGestureX = composeCompensatedTranslation({
-		gesture: dragX,
-		parentScale: unfocusedScale,
-		centerShift: scaleShiftX,
-		epsilon: EPSILON,
-	});
-
-	const compensatedGestureY = composeCompensatedTranslation({
-		gesture: dragY,
-		parentScale: unfocusedScale,
-		centerShift: scaleShiftY,
-		epsilon: EPSILON,
+	const trackingContentScale = props.active.gesture.dismissing
+		? resolveDismissScaleHandoff({
+				progress: props.active.progress,
+				releaseScale: dragScale,
+				targetScale: trackingTargetScale,
+				rawDrag,
+			})
+		: trackingContentBaseTransform.scale * dragScale;
+	const trackingContentTranslateX =
+		trackingContentBaseTransform.translateX + dragX;
+	const trackingContentTranslateY =
+		trackingContentBaseTransform.translateY + dragY;
+	const trackedSourceElement = resolveTrackedSourceElementTransform({
+		sourceBounds: link.source.bounds,
+		destinationBounds: trackingContentTarget,
+		contentTranslateX: trackingContentTranslateX,
+		contentTranslateY: trackingContentTranslateY,
+		contentScale: trackingContentScale,
+		parentScale: unfocusedContentScale,
+		screenWidth: screenLayout.width,
+		screenHeight: screenLayout.height,
 	});
 
-	const elementTranslateX = elementRaw.translateX + compensatedGestureX;
-	const elementTranslateY = elementRaw.translateY + compensatedGestureY;
-	const elementScaleX = elementRaw.scaleX * dragScale;
-	const elementScaleY = elementRaw.scaleY * dragScale;
-
-	const shouldShowUnfocusedElement =
-		props.active.entering || (props.active.closing && !props.active.settled);
-
 	return {
+		options: {
+			gestureProgressMode: "freeform",
+		},
 		content: {
 			style: {
-				transform: [{ scale: props.active.settled ? 1 : unfocusedScale }],
+				transform: [{ scale: unfocusedContentScale }],
 			},
 			props: {
-				pointerEvents: "none",
+				pointerEvents:
+					props.active.progress <= CLOSE_SOURCE_HANDOFF_PROGRESS
+						? "auto"
+						: "none",
 			},
 		},
 		[link.id]: {
 			style: {
-				transform: [
-					{ translateX: !shouldShowUnfocusedElement ? 0 : elementTranslateX },
-					{ translateY: !shouldShowUnfocusedElement ? 0 : elementTranslateY },
-					{ scaleX: !shouldShowUnfocusedElement ? 1 : elementScaleX },
-					{ scaleY: !shouldShowUnfocusedElement ? 1 : elementScaleY },
-				],
-				opacity: !shouldShowUnfocusedElement ? 0 : 1,
+				opacity: props.active.closing
+					? 1
+					: interpolate(props.active.progress, [0, 1], [1, 0], "clamp"),
+
 				zIndex: 9999,
 				elevation: 9999,
+				transform: [
+					{
+						translateX: props.active.logicallySettled
+							? 0
+							: trackedSourceElement.translateX,
+					},
+					{
+						translateY: props.active.logicallySettled
+							? 0
+							: trackedSourceElement.translateY,
+					},
+					{
+						scaleX: props.active.logicallySettled
+							? 1
+							: trackedSourceElement.scaleX,
+					},
+					{
+						scaleY: props.active.logicallySettled
+							? 1
+							: trackedSourceElement.scaleY,
+					},
+				],
 			},
 		},
 	};