react-native-screen-transitions 3.4.0-alpha.4 → 3.4.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-screen-transitions",
-	"version": "3.4.0-alpha.4",
+	"version": "3.4.0-alpha.6",
 	"description": "Easy screen transitions for React Native and Expo",
 	"author": "Ed",
 	"license": "MIT",

package/src/shared/components/create-boundary-component/index.tsx

@@ -17,6 +17,7 @@ import { useAutoSourceMeasurement } from "./hooks/use-auto-source-measurement";
 import { useBoundaryMeasureAndStore } from "./hooks/use-boundary-measure-and-store";
 import { useBoundaryPresence } from "./hooks/use-boundary-presence";
 import { useGroupActiveMeasurement } from "./hooks/use-group-active-measurement";
+import { useGroupActiveSourceMeasurement } from "./hooks/use-group-active-source-measurement";
 import { useInitialLayoutHandler } from "./hooks/use-initial-layout-handler";
 import { usePendingDestinationMeasurement } from "./hooks/use-pending-destination-measurement";
 import { usePendingDestinationRetryMeasurement } from "./hooks/use-pending-destination-retry-measurement";
@@ -172,6 +173,18 @@ export function createBoundaryComponent<P extends object>(
 			maybeMeasureAndStore,
 		});
 
+		// Source-side grouped retargeting: when an unfocused/source boundary
+		// becomes the active member, refresh its snapshot and source link so
+		// close transitions do not use stale pre-scroll geometry.
+		useGroupActiveSourceMeasurement({
+			enabled: runtimeEnabled,
+			group,
+			id,
+			hasNextScreen,
+			isAnimating,
+			maybeMeasureAndStore,
+		});
+
 		// While idle on source screens, re-measure after scroll settles so a later
 		// close transition starts from up-to-date source geometry.
 		useScrollSettledMeasurement({

package/src/shared/components/screen-container/deferred-visibility-host.tsx

@@ -6,6 +6,7 @@ import { useScreenStyles } from "../../providers/screen/styles.provider";
 
 type Props = {
 	children: React.ReactNode;
+	pointerEvents: "box-none" | undefined;
 };
 
 /**
@@ -15,20 +16,26 @@ type Props = {
  * This sits above backdrop/content/mask/surface so a deferred transition does
  * not leak raw first-paint UI from nested layers.
  */
-export const DeferredVisibilityHost = memo(({ children }: Props) => {
-	const { resolutionMode } = useScreenStyles();
+export const DeferredVisibilityHost = memo(
+	({ children, pointerEvents }: Props) => {
+		const { resolutionMode } = useScreenStyles();
 
-	const animatedStyle = useAnimatedStyle(() => {
-		"worklet";
-		return resolutionMode.value === "deferred" ? HIDDEN_STYLE : VISIBLE_STYLE;
-	});
+		const animatedStyle = useAnimatedStyle(() => {
+			"worklet";
+			return resolutionMode.value === "deferred" ? HIDDEN_STYLE : VISIBLE_STYLE;
+		});
 
-	return (
-		<Animated.View collapsable={false} style={[styles.host, animatedStyle]}>
-			{children}
-		</Animated.View>
-	);
-});
+		return (
+			<Animated.View
+				collapsable={false}
+				style={[styles.host, animatedStyle]}
+				pointerEvents={pointerEvents}
+			>
+				{children}
+			</Animated.View>
+		);
+	},
+);
 
 const styles = StyleSheet.create({
 	host: {

package/src/shared/components/screen-container/hooks/use-backdrop-pointer-events.ts

@@ -1,9 +1,8 @@
 import { useDescriptors } from "../../../providers/screen/descriptors";
 import { useStackCoreContext } from "../../../providers/stack/core.provider";
+import type { BackdropBehavior } from "../../../types/screen.types";
 import { StackType } from "../../../types/stack.types";
 
-type BackdropBehavior = "block" | "passthrough" | "dismiss" | "collapse";
-
 interface BackdropPointerEventsResult {
 	pointerEvents: "box-none" | undefined;
 	backdropBehavior: BackdropBehavior;

package/src/shared/components/screen-container/index.tsx

@@ -10,13 +10,22 @@ type Props = {
 };
 
 export const ScreenContainer = memo(({ children }: Props) => {
-	const { pointerEvents } = useBackdropPointerEvents();
+	const { pointerEvents, isBackdropActive, backdropBehavior } =
+		useBackdropPointerEvents();
 
 	return (
 		<View style={styles.container} pointerEvents={pointerEvents}>
-			<DeferredVisibilityHost>
-				<BackdropLayer />
-				<ContentLayer>{children}</ContentLayer>
+			<DeferredVisibilityHost pointerEvents={pointerEvents}>
+				<BackdropLayer
+					isBackdropActive={isBackdropActive}
+					backdropBehavior={backdropBehavior}
+				/>
+				<ContentLayer
+					pointerEvents={pointerEvents}
+					isBackdropActive={isBackdropActive}
+				>
+					{children}
+				</ContentLayer>
 			</DeferredVisibilityHost>
 		</View>
 	);

package/src/shared/components/screen-container/layers/backdrop.tsx

@@ -13,15 +13,20 @@ import { useScreenStyles } from "../../../providers/screen/styles.provider";
 import { AnimationStore } from "../../../stores/animation.store";
 import { GestureStore } from "../../../stores/gesture.store";
 import { SystemStore } from "../../../stores/system.store";
+import type { BackdropBehavior } from "../../../types/screen.types";
 import { animateToProgress } from "../../../utils/animation/animate-to-progress";
 import { findCollapseTarget } from "../../../utils/gesture/find-collapse-target";
-import { useBackdropPointerEvents } from "../hooks/use-backdrop-pointer-events";
 
-export const BackdropLayer = memo(function BackdropLayer() {
+export const BackdropLayer = memo(function BackdropLayer({
+	backdropBehavior,
+	isBackdropActive,
+}: {
+	backdropBehavior: BackdropBehavior;
+	isBackdropActive: boolean;
+}) {
 	const { stylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
 	const { dismissScreen } = useNavigationHelpers();
-	const { isBackdropActive, backdropBehavior } = useBackdropPointerEvents();
 
 	const BackdropComponent = current.options.backdropComponent;
 	const routeKey = current.route.key;
@@ -39,6 +44,7 @@ export const BackdropLayer = memo(function BackdropLayer() {
 				: null,
 		[BackdropComponent],
 	);
+
 	const handleBackdropPress = useCallback(() => {
 		if (backdropBehavior === "dismiss") {
 			dismissScreen();

package/src/shared/components/screen-container/layers/content.tsx

@@ -11,64 +11,68 @@ import { useGestureContext } from "../../../providers/gestures";
 import { useDescriptors } from "../../../providers/screen/descriptors";
 import { useScreenStyles } from "../../../providers/screen/styles.provider";
 import { resolveNavigationMaskEnabled } from "../../../utils/resolve-screen-transition-options";
-import { useBackdropPointerEvents } from "../hooks/use-backdrop-pointer-events";
 import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
 import { SurfaceContainer } from "./surface-container";
 
 type Props = {
 	children: React.ReactNode;
+	pointerEvents: "box-none" | undefined;
+	isBackdropActive: boolean;
 };
 
-export const ContentLayer = memo(({ children }: Props) => {
-	const { stylesMap } = useScreenStyles();
-	const { current } = useDescriptors();
-	const { pointerEvents, isBackdropActive } = useBackdropPointerEvents();
+export const ContentLayer = memo(
+	({ children, pointerEvents, isBackdropActive }: Props) => {
+		const { stylesMap } = useScreenStyles();
+		const { current } = useDescriptors();
 
-	const gestureContext = useGestureContext();
-	const isNavigationMaskEnabled = resolveNavigationMaskEnabled(current.options);
-	const contentPointerEvents = isBackdropActive ? "box-none" : pointerEvents;
+		const gestureContext = useGestureContext();
+		const isNavigationMaskEnabled = resolveNavigationMaskEnabled(
+			current.options,
+		);
+		const contentPointerEvents = isBackdropActive ? "box-none" : pointerEvents;
 
-	const hasAutoSnapPoint =
-		current.options.snapPoints?.includes("auto") ?? false;
+		const hasAutoSnapPoint =
+			current.options.snapPoints?.includes("auto") ?? false;
 
-	const handleContentLayout = useContentLayout();
+		const handleContentLayout = useContentLayout();
 
-	const animatedContentStyle = useAnimatedStyle(() => {
-		"worklet";
-		return stylesMap.value.content?.style || NO_STYLES;
-	});
+		const animatedContentStyle = useAnimatedStyle(() => {
+			"worklet";
+			return stylesMap.value.content?.style || NO_STYLES;
+		});
 
-	const animatedContentProps = useAnimatedProps(() => {
-		"worklet";
-		return stylesMap.value.content?.props ?? NO_PROPS;
-	});
+		const animatedContentProps = useAnimatedProps(() => {
+			"worklet";
+			return stylesMap.value.content?.props ?? NO_PROPS;
+		});
 
-	return (
-		<GestureDetector gesture={gestureContext!.panGesture}>
-			<Animated.View
-				style={[styles.content, animatedContentStyle]}
-				animatedProps={animatedContentProps}
-				pointerEvents={contentPointerEvents}
-			>
-				<MaybeMaskedNavigationContainer
+		return (
+			<GestureDetector gesture={gestureContext!.panGesture}>
+				<Animated.View
+					style={[styles.content, animatedContentStyle]}
+					animatedProps={animatedContentProps}
 					pointerEvents={contentPointerEvents}
-					enabled={isNavigationMaskEnabled}
 				>
-					<SurfaceContainer pointerEvents={contentPointerEvents}>
-						{hasAutoSnapPoint ? (
-							<View collapsable={false} onLayout={handleContentLayout}>
-								{children}
-							</View>
-						) : (
-							children
-						)}
-					</SurfaceContainer>
-				</MaybeMaskedNavigationContainer>
-			</Animated.View>
-		</GestureDetector>
-	);
-});
+					<MaybeMaskedNavigationContainer
+						pointerEvents={contentPointerEvents}
+						enabled={isNavigationMaskEnabled}
+					>
+						<SurfaceContainer pointerEvents={contentPointerEvents}>
+							{hasAutoSnapPoint ? (
+								<View collapsable={false} onLayout={handleContentLayout}>
+									{children}
+								</View>
+							) : (
+								children
+							)}
+						</SurfaceContainer>
+					</MaybeMaskedNavigationContainer>
+				</Animated.View>
+			</GestureDetector>
+		);
+	},
+);
 
 const styles = StyleSheet.create({
 	content: {

package/src/shared/constants.ts

@@ -57,6 +57,7 @@ export const createScreenTransitionState = (
 	closing: 0,
 	animating: 0,
 	settled: 1,
+	logicallySettled: 1,
 	entering: 0,
 	gesture: { ...DEFAULT_GESTURE_VALUES },
 	route,
@@ -79,6 +80,7 @@ export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 		closing: 0,
 		animating: 0,
 		settled: 1,
+		logicallySettled: 1,
 		entering: 0,
 		gesture: DEFAULT_GESTURE_VALUES,
 		route: {} as RouteProp<ParamListBase>,

package/src/shared/providers/gestures/helpers/gesture-physics.ts

@@ -31,10 +31,12 @@ type GestureAxisCandidate = {
 export const normalizeVelocity = (
 	velocityPixelsPerSecond: number,
 	screenSize: number,
-	maxMagnitude: number = DEFAULT_GESTURE_RELEASE_VELOCITY_MAX,
+	maxMagnitude?: number,
 ) => {
 	"worklet";
-	const max = Math.max(0, Math.abs(maxMagnitude));
+	const resolvedMaxMagnitude =
+		maxMagnitude ?? DEFAULT_GESTURE_RELEASE_VELOCITY_MAX;
+	const max = Math.max(0, Math.abs(resolvedMaxMagnitude));
 	return clamp(velocityPixelsPerSecond / Math.max(1, screenSize), -max, max);
 };
 

package/src/shared/providers/gestures/helpers/gesture-reset.ts

@@ -32,14 +32,18 @@ export const resetGestureValues = ({
 	shouldDismiss,
 	event,
 	dimensions,
-	gestureReleaseVelocityScale = DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
-	gestureReleaseVelocityMax = DEFAULT_GESTURE_RELEASE_VELOCITY_MAX,
+	gestureReleaseVelocityScale,
+	gestureReleaseVelocityMax,
 }: ResetGestureValuesProps) => {
 	"worklet";
+	const resolvedGestureReleaseVelocityScale =
+		gestureReleaseVelocityScale ?? DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE;
+	const resolvedGestureReleaseVelocityMax =
+		gestureReleaseVelocityMax ?? DEFAULT_GESTURE_RELEASE_VELOCITY_MAX;
 
 	const effectiveReleaseVelocityMax = Math.max(
 		0,
-		Math.abs(gestureReleaseVelocityMax),
+		Math.abs(resolvedGestureReleaseVelocityMax),
 	);
 
 	const vxNorm = normalizeVelocity(
@@ -67,11 +71,11 @@ export const resetGestureValues = ({
 	// so the spring carries the gesture's momentum. The spec controls the
 	// spring character — use an underdamped spec (e.g. FlingSpec) for orbit/fling.
 	const resetVX = shouldDismiss
-		? vxNorm * gestureReleaseVelocityScale
+		? vxNorm * resolvedGestureReleaseVelocityScale
 		: vxTowardZero;
 
 	const resetVY = shouldDismiss
-		? vyNorm * gestureReleaseVelocityScale
+		? vyNorm * resolvedGestureReleaseVelocityScale
 		: vyTowardZero;
 
 	animateMany({

package/src/shared/providers/gestures/helpers/gesture-targets.ts

@@ -111,22 +111,30 @@ export function determineSnapTarget({
 	snapPoints,
 	velocity,
 	dimension,
-	velocityFactor = DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT,
-	canDismiss = true,
+	velocityFactor,
+	canDismiss,
 }: DetermineSnapTargetProps): DetermineSnapTargetResult {
 	"worklet";
+	const resolvedVelocityFactor =
+		velocityFactor ?? DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT;
+	const resolvedCanDismiss = canDismiss ?? true;
 
 	// Convert velocity to progress units (positive = toward dismiss = decreasing progress)
-	const velocityInProgress = (velocity / dimension) * velocityFactor;
+	const velocityInProgress = (velocity / dimension) * resolvedVelocityFactor;
 
 	// Project where we'd end up with velocity
 	const projectedProgress = currentProgress - velocityInProgress;
 
-	const sanitizedSnapPoints = sanitizeSnapPoints(snapPoints, canDismiss);
+	const sanitizedSnapPoints = sanitizeSnapPoints(
+		snapPoints,
+		resolvedCanDismiss,
+	);
 
 	// Build all possible targets: dismiss (0) only if allowed, plus all snap points
 	const allTargets = Array.from(
-		new Set(canDismiss ? [0, ...sanitizedSnapPoints] : sanitizedSnapPoints),
+		new Set(
+			resolvedCanDismiss ? [0, ...sanitizedSnapPoints] : sanitizedSnapPoints,
+		),
 	).sort((a, b) => a - b);
 
 	if (allTargets.length === 0) {
@@ -162,6 +170,6 @@ export function determineSnapTarget({
 
 	return {
 		targetProgress,
-		shouldDismiss: canDismiss && targetProgress === 0,
+		shouldDismiss: resolvedCanDismiss && targetProgress === 0,
 	};
 }

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

@@ -1,5 +1,10 @@
 import type { SharedValue } from "react-native-reanimated";
-import { EPSILON } from "../../../../constants";
+import {
+	ANIMATION_SNAP_THRESHOLD,
+	EPSILON,
+	FALSE,
+	TRUE,
+} from "../../../../constants";
 import type { GestureStoreMap } from "../../../../stores/gesture.store";
 import type { ScreenTransitionState } from "../../../../types/animation.types";
 import type { Layout } from "../../../../types/screen.types";
@@ -13,6 +18,7 @@ type BuiltState = {
 	gesture: GestureStoreMap;
 	route: BaseStackRoute;
 	meta?: Record<string, unknown>;
+	targetProgress: SharedValue<number>;
 	resolvedAutoSnapPoint: SharedValue<number>;
 	measuredContentLayout: SharedValue<Layout | null>;
 	hasAutoSnapPoint: boolean;
@@ -20,6 +26,13 @@ type BuiltState = {
 	unwrapped: ScreenTransitionState;
 };
 
+interface ComputeLogicallySettledParams {
+	progress: number;
+	targetProgress: number;
+	settled: number;
+	dragging: number;
+}
+
 /**
  * Computes the animated snap index based on progress and snap points.
  * Returns -1 if no snap points, otherwise interpolates between indices.
@@ -41,6 +54,35 @@ const computeSnapIndex = (progress: number, snapPoints: number[]): number => {
 	return snapPoints.length - 1;
 };
 
+/**
+ * Determines whether the screen transition is logically settled.
+ *
+ * A transition is considered logically settled when:
+ * - The `settled` flag is explicitly set, OR
+ * - The screen is not being dragged AND the progress is within
+ *   {@link ANIMATION_SNAP_THRESHOLD} of the target progress.
+ */
+export const computeLogicallySettled = ({
+	progress,
+	targetProgress,
+	settled,
+	dragging,
+}: ComputeLogicallySettledParams) => {
+	"worklet";
+
+	if (settled) {
+		return TRUE;
+	}
+
+	if (dragging) {
+		return FALSE;
+	}
+
+	return Math.abs(progress - targetProgress) <= ANIMATION_SNAP_THRESHOLD
+		? TRUE
+		: FALSE;
+};
+
 export const hydrateTransitionState = (
 	s: BuiltState,
 	dimensions: Layout,
@@ -72,6 +114,12 @@ export const hydrateTransitionState = (
 	out.gesture.isDragging = out.gesture.dragging;
 
 	out.settled = out.animating || out.gesture.dismissing || out.closing ? 0 : 1;
+	out.logicallySettled = computeLogicallySettled({
+		progress: out.progress,
+		targetProgress: s.targetProgress.value,
+		settled: out.settled,
+		dragging: out.gesture.dragging,
+	});
 
 	out.meta = s.meta;
 	out.layouts.screen.width = dimensions.width;

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

@@ -71,6 +71,7 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		progress: 0,
 		stackProgress: 0,
 		snapIndex: -1,
+		logicallySettled: 1,
 		focused: true,
 		active: DEFAULT_SCREEN_TRANSITION_STATE,
 		navigationMaskEnabled: currentNavigationMaskEnabled,
@@ -121,6 +122,7 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 			progress,
 			stackProgress,
 			snapIndex: current.snapIndex,
+			logicallySettled: helpers.active.logicallySettled,
 			...helpers,
 		};
 

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

@@ -23,6 +23,7 @@ type BuiltState = {
 	gesture: GestureStoreMap;
 	route: BaseStackRoute;
 	meta?: Record<string, unknown>;
+	targetProgress: SharedValue<number>;
 	resolvedAutoSnapPoint: SharedValue<number>;
 	measuredContentLayout: SharedValue<Layout | null>;
 	hasAutoSnapPoint: boolean;
@@ -62,6 +63,7 @@ export const useBuildTransitionState = (
 			closing: AnimationStore.getValue(key, "closing"),
 			entering: AnimationStore.getValue(key, "entering"),
 			animating: AnimationStore.getValue(key, "animating"),
+			targetProgress: SystemStore.getValue(key, "targetProgress"),
 			resolvedAutoSnapPoint: SystemStore.getValue(key, "resolvedAutoSnapPoint"),
 			measuredContentLayout: SystemStore.getValue(key, "measuredContentLayout"),
 			hasAutoSnapPoint: snapPoints?.includes("auto") ?? false,

package/src/shared/types/animation.types.ts

@@ -53,6 +53,15 @@ export type ScreenTransitionState = {
 	 */
 	settled: number;
 
+	/**
+	 * Whether this screen is logically complete for choreography purposes.
+	 * - `0`: The screen is still meaningfully away from its animation target
+	 * - `1`: The screen is visually close enough to its target to be treated as done
+	 *
+	 * Unlike `settled`, this may become `1` before the underlying spring fully stops.
+	 */
+	logicallySettled: number;
+
 	/**
 	 * Live gesture values for this screen.
 	 * Contains translation (x, y), normalized values (-1 to 1),
@@ -176,6 +185,12 @@ export interface ScreenInterpolationProps {
 	 */
 	snapIndex: number;
 
+	/**
+	 * Whether the active transition is visually close enough to its target to be
+	 * treated as complete, even if the animation is still physically settling.
+	 */
+	logicallySettled: number;
+
 	/**
 	 * Function that provides access to bounds helpers for shared screen transitions.
 	 */

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

@@ -22,6 +22,8 @@ export type SheetScrollGestureBehavior =
  */
 export type SnapPoint = number | "auto";
 
+export type BackdropBehavior = "block" | "passthrough" | "dismiss" | "collapse";
+
 export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
 	/**
 	 * Connects this component to custom animated styles defined in screenStyleInterpolator.
@@ -282,7 +284,7 @@ export type ScreenTransitionConfig = {
 	 *
 	 * @default 'block' (or 'passthrough' for component stacks)
 	 */
-	backdropBehavior?: "block" | "passthrough" | "dismiss" | "collapse";
+	backdropBehavior?: BackdropBehavior;
 
 	/**
 	 * Custom component to render as the backdrop layer (between screens).

package/src/shared/utils/bounds/zoom/build.ts

@@ -143,7 +143,10 @@ export const buildZoomStyles = ({
 		? NAVIGATION_MASK_CONTAINER_STYLE_ID
 		: "content";
 
-	if (!resolvedPair.sourceBounds) {
+	// To avoid initial flickering, we'll want to hide if there are no source bounds
+	// But to also avoid scenarios where activeId changes in dst and theres a failed measurement,
+	// we should only hide if entering and there is no source bounds.
+	if (!resolvedPair.sourceBounds && props.active.entering) {
 		return {
 			[focusedContainerStyleId]: HIDDEN_STYLE,
 		};
@@ -281,11 +284,12 @@ export const buildZoomStyles = ({
 	}
 
 	const unfocusedFade = props.active?.closing
-		? interpolate(progress, [1.6, 2], [1, debug ? 0.5 : 0], "clamp")
-		: interpolate(progress, [1, 1.5], [1, debug ? 0.5 : 0], "clamp");
+		? interpolate(progress, [1.6, 2], [1, debug ? 1 : 0], "clamp")
+		: interpolate(progress, [1, 1.5], [1, debug ? 1 : 0], "clamp");
 
 	const unfocusedScale = interpolate(progress, [1, 2], [1, 0.95], "clamp");
 	const isUnfocusedIdle = props.active.settled === 1;
+	const shouldHideUnfocusedIdle = isUnfocusedIdle && !debug;
 	const elementTarget =
 		explicitTarget !== undefined || resolvedPair.destinationBounds
 			? getZoomContentTarget({
@@ -355,7 +359,7 @@ export const buildZoomStyles = ({
 		toNumber(elementRaw.translateY) + compensatedGestureY;
 	const elementScaleX = toNumber(elementRaw.scaleX, 1) * dragScale;
 	const elementScaleY = toNumber(elementRaw.scaleY, 1) * dragScale;
-	const resolvedElementStyle = isUnfocusedIdle
+	const resolvedElementStyle = shouldHideUnfocusedIdle
 		? {
 				transform: [
 					{ translateX: 0 },
@@ -369,12 +373,32 @@ export const buildZoomStyles = ({
 			}
 		: {
 				transform: [
-					{ translateX: elementTranslateX },
-					{ translateY: elementTranslateY },
-					{ scaleX: elementScaleX },
-					{ scaleY: elementScaleY },
+					{
+						translateX:
+							props.active.logicallySettled && !props.active.closing
+								? 0
+								: elementTranslateX,
+					},
+					{
+						translateY:
+							props.active.logicallySettled && !props.active.closing
+								? 0
+								: elementTranslateY,
+					},
+					{
+						scaleX:
+							props.active.logicallySettled && !props.active.closing
+								? 1
+								: elementScaleX,
+					},
+					{
+						scaleY:
+							props.active.logicallySettled && !props.active.closing
+								? 1
+								: elementScaleY,
+					},
 				],
-				opacity: unfocusedFade,
+				opacity: debug ? 0.5 : unfocusedFade,
 				zIndex: 9999,
 				elevation: 9999,
 			};