react-native-screen-transitions 3.9.0-beta.2 → 3.9.0

package/src/shared/utils/bounds/navigation/zoom/config.ts

@@ -3,24 +3,22 @@ export const ZOOM_SHARED_OPTIONS = Object.freeze({
 	scaleMode: "uniform" as const,
 });
 
-export const ZOOM_DRAG_DIRECTIONAL_SCALE_MIN = 0.25;
-export const ZOOM_DRAG_DIRECTIONAL_SCALE_MAX = 1.06;
-export const ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT = 2;
-export const ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX = 1;
-export const ZOOM_DRAG_TRANSLATION_POSITIVE_MAX = 1;
-export const ZOOM_DRAG_TRANSLATION_EXPONENT = 1;
-export const ZOOM_DISMISS_SCALE_ORBIT_DEPTH = 0.5;
+export const ZOOM_DISMISS_VELOCITY_DEPTH = 1.0;
 export const ZOOM_BACKGROUND_SCALE = 0.9375;
-export const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [0, 0.5, 0, 1] as const;
-export const ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [0.6, 1, 0, 1] as const;
-export const ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [1, 2, 1, 0] as const;
+// Keep the previous screen visible beneath the zoom instead of reaching black.
+export const ZOOM_BACKDROP_MAX_OPACITY = 0.45;
+// Geometry-aligned native frames reach their darkest point around here.
+export const ZOOM_SCREEN_A_FADE_END = 0.54;
+// Native starts revealing the destination immediately while the source begins
+// handing ownership over in the first tenth of the opening travel.
+export const ZOOM_FOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [0, 0.28, 0, 1] as const;
+export const ZOOM_UNFOCUSED_ELEMENT_OPEN_OPACITY_RANGE = [
+	1.08, 1.32, 1, 0,
+] as const;
+// On close, red is prepared behind opaque blue before blue fades away.
+export const ZOOM_FOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [
+	0.13, 0.7, 0, 1,
+] as const;
 export const ZOOM_UNFOCUSED_ELEMENT_CLOSE_OPACITY_RANGE = [
-	1.9, 2, 1, 0,
+	1.7, 2, 1, 0,
 ] as const;
-
-export const ZOOM_MASK_OUTSET = Object.freeze({
-	top: 0,
-	right: 0,
-	bottom: 0,
-	left: 0,
-});

package/src/shared/utils/bounds/navigation/zoom/drag.ts

@@ -0,0 +1,327 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import { EPSILON } from "../../../../constants";
+import type {
+	BoundsInterpolationProps,
+	BoundsNavigationZoomDragOptions,
+} from "../../../../types/bounds.types";
+import type { Layout } from "../../../../types/screen.types";
+import { resolveRevealContentBaseTransform } from "../reveal/math";
+import { ZOOM_DISMISS_VELOCITY_DEPTH } from "./config";
+
+const ZOOM_DRAG_SCALE_EXPONENT = 2;
+const ZOOM_DRAG_SCALE_FLOOR = 0.5;
+const ZOOM_COUNTER_DRAG_SCALE_INTENSITY = 0.4;
+const ZOOM_PRIMARY_DRAG_TRANSLATION_SCALE = 0.8;
+const ZOOM_PRIMARY_DRAG_RESISTANCE = 2;
+const ZOOM_HORIZONTAL_DRAG_DISTANCE_SCALE = 1.5;
+const ZOOM_CROSS_AXIS_DRAG_TRANSLATION_SCALE = 0.35;
+const ZOOM_CROSS_AXIS_DRAG_RESISTANCE = 0.05;
+const ZOOM_PINCH_SCALE_RESPONSE = 1;
+const ZOOM_PINCH_VELOCITY_DEPTH_MULTIPLIER = 2;
+
+type ZoomGesture = BoundsInterpolationProps["active"]["gesture"];
+
+export type ZoomDragState = {
+	collapsesMask: boolean;
+	dismissContentScale: number;
+	dismissNorm: number;
+	dismissProgress: number;
+	dragX: number;
+	dragY: number;
+	gestureScale: number;
+	isDismissing: boolean;
+	isVerticalInverted: boolean;
+	rotation: number;
+};
+
+export function resolveZoomDismissContentScale({
+	transitionRemaining,
+	releaseScale,
+	targetScale,
+	velocity,
+	velocityDepth,
+}: {
+	transitionRemaining: number;
+	releaseScale: number;
+	targetScale: number;
+	velocity: number;
+	velocityDepth: number;
+}) {
+	"worklet";
+
+	const closeProgress = 1 - transitionRemaining;
+	const depth = velocityDepth * velocity;
+
+	const scaleDelta = targetScale - releaseScale;
+	const controlScale1 = releaseScale + scaleDelta / 3;
+	const linearControlScale2 = releaseScale + (2 * scaleDelta) / 3;
+	const controlScale2 = Math.max(EPSILON, linearControlScale2 * (1 - depth));
+	const remaining = 1 - closeProgress;
+
+	return (
+		remaining * remaining * remaining * releaseScale +
+		3 * remaining * remaining * closeProgress * controlScale1 +
+		3 * remaining * closeProgress * closeProgress * controlScale2 +
+		closeProgress * closeProgress * closeProgress * targetScale
+	);
+}
+
+export function resolveZoomPrimaryDragTranslation({
+	translation,
+	dimension,
+}: {
+	translation: number;
+	dimension: number;
+}) {
+	"worklet";
+
+	const direction = translation < 0 ? -1 : 1;
+	const translationDistance = Math.abs(translation);
+	const baseDistance = Math.max(1, dimension);
+	const normalizedTranslation = translationDistance / baseDistance;
+	const effectiveResistance = ZOOM_PRIMARY_DRAG_RESISTANCE * 0.85;
+	const resistedTranslation =
+		(baseDistance *
+			(1 - Math.exp(-effectiveResistance * normalizedTranslation))) /
+		effectiveResistance;
+
+	return (
+		direction *
+		Math.min(
+			baseDistance,
+			resistedTranslation * ZOOM_PRIMARY_DRAG_TRANSLATION_SCALE,
+		)
+	);
+}
+
+export function resolveZoomHorizontalDragTranslation({
+	translation,
+	dimension,
+}: {
+	translation: number;
+	dimension: number;
+}) {
+	"worklet";
+
+	return (
+		resolveZoomPrimaryDragTranslation({ translation, dimension }) *
+		ZOOM_HORIZONTAL_DRAG_DISTANCE_SCALE
+	);
+}
+
+export function resolveZoomCrossAxisDragTranslation({
+	translation,
+	dimension,
+}: {
+	translation: number;
+	dimension: number;
+}) {
+	"worklet";
+
+	const direction = translation < 0 ? -1 : 1;
+	const translationDistance = Math.abs(translation);
+	const baseDistance = Math.max(1, dimension);
+	const normalizedTranslation = translationDistance / baseDistance;
+	const resistedTranslation =
+		(baseDistance *
+			(1 -
+				Math.exp(-ZOOM_CROSS_AXIS_DRAG_RESISTANCE * normalizedTranslation))) /
+		ZOOM_CROSS_AXIS_DRAG_RESISTANCE;
+
+	return (
+		direction *
+		Math.min(
+			baseDistance,
+			resistedTranslation * ZOOM_CROSS_AXIS_DRAG_TRANSLATION_SCALE,
+		)
+	);
+}
+
+export function resolveZoomDragScale(normalized: number) {
+	"worklet";
+
+	const scaleInput =
+		normalized < 0
+			? normalized * ZOOM_COUNTER_DRAG_SCALE_INTENSITY
+			: normalized;
+	const progress = Math.min(1, scaleInput);
+	const rawMinimumScale =
+		ZOOM_DRAG_SCALE_FLOOR ** (1 / ZOOM_DRAG_SCALE_EXPONENT);
+	const rawScale = 1 + (rawMinimumScale - 1) * progress;
+
+	return rawScale ** ZOOM_DRAG_SCALE_EXPONENT;
+}
+
+export function resolveZoomPinchScale(scale: number) {
+	"worklet";
+	return 1 + (scale - 1) * ZOOM_PINCH_SCALE_RESPONSE;
+}
+
+export function resolveZoomDismissalNorm(
+	normalized: number,
+	isInverted: boolean,
+) {
+	"worklet";
+	return isInverted ? -normalized : normalized;
+}
+
+export function resolveZoomDragState({
+	gesture,
+	activeTransitionProgress,
+	screenLayout,
+	sourceBounds,
+	trackingContentTarget,
+	dragOptions,
+}: {
+	gesture: ZoomGesture;
+	activeTransitionProgress: number;
+	screenLayout: Layout;
+	sourceBounds: MeasuredDimensions;
+	trackingContentTarget: MeasuredDimensions;
+	dragOptions?: BoundsNavigationZoomDragOptions;
+}): ZoomDragState {
+	"worklet";
+
+	const gestureHandoff = gesture.handoff;
+	const isDismissing = gesture.dismissing === 1;
+	const activeGesture = gestureHandoff.active;
+	const isHorizontalInverted = activeGesture === "horizontal-inverted";
+	const isHorizontal = activeGesture === "horizontal" || isHorizontalInverted;
+	const isVerticalInverted = activeGesture === "vertical-inverted";
+	const isVertical = activeGesture === "vertical" || isVerticalInverted;
+	const isPinchIn = activeGesture === "pinch-in";
+	const isInverted = isHorizontalInverted || isVerticalInverted;
+	const translationResponse = Math.max(
+		0,
+		isHorizontal
+			? (dragOptions?.translation?.horizontal ?? 1)
+			: isVertical
+				? (dragOptions?.translation?.vertical ?? 1)
+				: 1,
+	);
+	const scaleResponse = Math.max(
+		0,
+		isHorizontal
+			? (dragOptions?.scale?.horizontal ?? 1)
+			: isVertical
+				? (dragOptions?.scale?.vertical ?? 1)
+				: 1,
+	);
+	const handoffPrimaryNorm = isPinchIn
+		? -gestureHandoff.normScale
+		: isHorizontal
+			? gestureHandoff.normX
+			: gestureHandoff.normY;
+	const livePrimaryNorm = isPinchIn
+		? -gesture.normScale
+		: isHorizontal
+			? gesture.normX
+			: gesture.normY;
+	const dismissNorm = Math.max(
+		0,
+		resolveZoomDismissalNorm(handoffPrimaryNorm, isInverted),
+	);
+	const nativeDragX = isPinchIn
+		? gesture.x
+		: isHorizontal
+			? resolveZoomHorizontalDragTranslation({
+					translation: gesture.x,
+					dimension: screenLayout.width,
+				})
+			: isVertical
+				? resolveZoomCrossAxisDragTranslation({
+						translation: gesture.x,
+						dimension: screenLayout.width,
+					})
+				: 0;
+	const nativeDragY = isPinchIn
+		? gesture.y
+		: isHorizontal
+			? resolveZoomCrossAxisDragTranslation({
+					translation: gesture.y,
+					dimension: screenLayout.height,
+				})
+			: resolveZoomPrimaryDragTranslation({
+					translation: gesture.y,
+					dimension: screenLayout.height,
+				});
+	const dragX = nativeDragX * translationResponse;
+	const dragY = nativeDragY * translationResponse;
+	const scaleNorm = resolveZoomDismissalNorm(
+		isDismissing ? handoffPrimaryNorm : livePrimaryNorm,
+		isInverted,
+	);
+	const nativeGestureScale = isPinchIn
+		? resolveZoomPinchScale(isDismissing ? gestureHandoff.scale : gesture.scale)
+		: resolveZoomDragScale(scaleNorm);
+	const gestureScale = isPinchIn
+		? nativeGestureScale
+		: Math.max(EPSILON, 1 + (nativeGestureScale - 1) * scaleResponse);
+	const rotation = isPinchIn
+		? isDismissing
+			? gestureHandoff.rotation * activeTransitionProgress
+			: gesture.rotation
+		: 0;
+
+	let dismissContentScale = gestureScale;
+
+	if (isDismissing) {
+		const targetContentScale = resolveRevealContentBaseTransform({
+			progress: 0,
+			sourceBounds,
+			destinationBounds: trackingContentTarget,
+			screenLayout,
+		}).scale;
+		dismissContentScale = resolveZoomDismissContentScale({
+			transitionRemaining: activeTransitionProgress,
+			releaseScale: gestureScale,
+			targetScale: targetContentScale,
+			velocity: gestureHandoff.velocity,
+			velocityDepth:
+				ZOOM_DISMISS_VELOCITY_DEPTH *
+				(isPinchIn ? ZOOM_PINCH_VELOCITY_DEPTH_MULTIPLIER : 1),
+		});
+	}
+
+	return {
+		collapsesMask: isVertical,
+		dismissContentScale,
+		dismissNorm,
+		dismissProgress: isDismissing ? 1 - activeTransitionProgress : 0,
+		dragX,
+		dragY,
+		gestureScale,
+		isDismissing,
+		isVerticalInverted,
+		rotation,
+	};
+}
+
+export function resolveZoomTrackedGestureScale({
+	drag,
+	activeTransitionProgress,
+	screenLayout,
+	sourceBounds,
+	trackingContentTarget,
+}: {
+	drag: ZoomDragState;
+	activeTransitionProgress: number;
+	screenLayout: Layout;
+	sourceBounds: MeasuredDimensions;
+	trackingContentTarget: MeasuredDimensions;
+}) {
+	"worklet";
+
+	if (!drag.isDismissing) {
+		return drag.gestureScale;
+	}
+
+	const trackedContentBaseScale = resolveRevealContentBaseTransform({
+		progress: activeTransitionProgress,
+		sourceBounds,
+		destinationBounds: trackingContentTarget,
+		screenLayout,
+	}).scale;
+
+	return drag.dismissContentScale / trackedContentBaseScale;
+}

package/src/shared/utils/bounds/navigation/zoom/helpers.ts

@@ -1,212 +1,155 @@
-import { interpolate } from "react-native-reanimated";
+import type { MeasuredDimensions } from "react-native-reanimated";
 import { EPSILON } from "../../../../constants";
-import type { BoundsLink } from "../../../../types/bounds.types";
-import type {
-	ActiveGesture,
-	ResolvedPanGestureDirection,
-} from "../../../../types/gesture.types";
 import type { Layout } from "../../../../types/screen.types";
-import type { BoundsOptions } from "../../types/options";
+import type { BoundsAnchor } from "../../types/options";
 import {
-	ZOOM_BACKGROUND_SCALE,
-	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,
-} from "./config";
-
-export function getZoomContentTarget({
-	explicitTarget,
-	screenLayout,
-	anchor,
-	link,
+	resolveRevealContentBaseTransform,
+	resolveTrackedSourceElementTransform,
+} from "../reveal/math";
+
+export function resolveZoomBackdropOpacity({
+	transitionProgress,
+	dismissalDrag,
+	fadeEnd,
+	maxOpacity,
 }: {
-	explicitTarget: BoundsOptions["target"] | undefined;
-	screenLayout: Layout;
-	anchor: BoundsOptions["anchor"] | undefined;
-	link: BoundsLink;
+	transitionProgress: number;
+	dismissalDrag: number;
+	fadeEnd: number;
+	maxOpacity: number;
 }) {
 	"worklet";
 
-	if (explicitTarget) return explicitTarget;
-
-	const sourceBounds = link.source?.bounds;
-	const screenWidth = screenLayout.width;
-
-	if (!sourceBounds || sourceBounds.width <= 0 || screenWidth <= 0) {
-		return "fullscreen" as const;
-	}
-
-	const height = (sourceBounds.height / sourceBounds.width) * screenWidth;
-	const verticalAnchor =
-		anchor === "bottomLeading" ||
-		anchor === "bottom" ||
-		anchor === "bottomTrailing"
-			? "bottom"
-			: anchor === "center" || anchor === "leading" || anchor === "trailing"
-				? "center"
-				: "top";
-	const y =
-		verticalAnchor === "top"
-			? 0
-			: verticalAnchor === "bottom"
-				? screenLayout.height - height
-				: (screenLayout.height - height) / 2;
+	const clampedProgress = Math.min(1, Math.max(0, transitionProgress));
+	const clampedDrag = Math.min(1, Math.max(0, dismissalDrag));
+	const safeFadeEnd = Math.max(EPSILON, fadeEnd);
+	const transitionOpacity = Math.min(1, clampedProgress / safeFadeEnd);
+	const clampedMaxOpacity = Math.min(1, Math.max(0, maxOpacity));
 
-	return {
-		x: 0,
-		y,
-		pageX: 0,
-		pageY: y,
-		width: screenWidth,
-		height,
-	};
+	return clampedMaxOpacity * transitionOpacity * (1 - clampedDrag);
 }
 
-export function resolveDragScaleTuple(
-	value:
-		| readonly [shrinkMin: number, growMax: number, exponent?: number]
-		| undefined,
-) {
+export function resolveZoomPinchFocalOffset({
+	gestureScale,
+	pinchOriginX,
+	pinchOriginY,
+	progress,
+	rotation,
+	screenLayout,
+}: {
+	gestureScale: number;
+	pinchOriginX: number;
+	pinchOriginY: number;
+	progress: number;
+	rotation: number;
+	screenLayout: Layout;
+}) {
 	"worklet";
 
-	return {
-		shrinkMin: value?.[0] ?? ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
-		growMax: value?.[1] ?? ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
-		exponent: value?.[2] ?? ZOOM_DRAG_DIRECTIONAL_SCALE_EXPONENT,
-	};
-}
+	if (Math.abs(gestureScale - 1) <= EPSILON && Math.abs(rotation) <= EPSILON) {
+		return { x: 0, y: 0 };
+	}
 
-export function resolveDragTranslationTuple(
-	value:
-		| readonly [negativeMax: number, positiveMax: number, exponent?: number]
-		| undefined,
-) {
-	"worklet";
+	const offsetX = pinchOriginX - screenLayout.width / 2;
+	const offsetY = pinchOriginY - screenLayout.height / 2;
+	const cosine = Math.cos(rotation);
+	const sine = Math.sin(rotation);
+	const transformedOffsetX = gestureScale * (offsetX * cosine - offsetY * sine);
+	const transformedOffsetY = gestureScale * (offsetX * sine + offsetY * cosine);
+	const clampedProgress = Math.min(1, Math.max(0, progress));
 
 	return {
-		negativeMax: value?.[0] ?? ZOOM_DRAG_TRANSLATION_NEGATIVE_MAX,
-		positiveMax: value?.[1] ?? ZOOM_DRAG_TRANSLATION_POSITIVE_MAX,
-		exponent: value?.[2] ?? ZOOM_DRAG_TRANSLATION_EXPONENT,
+		x: (offsetX - transformedOffsetX) * clampedProgress,
+		y: (offsetY - transformedOffsetY) * clampedProgress,
 	};
 }
 
-export function resolveBackgroundScale(value: number | undefined) {
-	"worklet";
-
-	return value ?? ZOOM_BACKGROUND_SCALE;
-}
-
-const isResolvedPanDirection = (
-	direction: ActiveGesture | null | undefined,
-): direction is ResolvedPanGestureDirection => {
-	"worklet";
-	return (
-		direction === "horizontal" ||
-		direction === "horizontal-inverted" ||
-		direction === "vertical" ||
-		direction === "vertical-inverted"
-	);
-};
-
-const resolveMotionDirection = ({
-	normX,
-	normY,
-	rawNormX,
-	rawNormY,
+export function resolveZoomTrackedSourceTransform({
+	progress,
+	sourceBounds,
+	destinationBounds,
+	screenLayout,
+	dragX,
+	dragY,
+	gestureScale,
+	parentScale,
+	rotation = 0,
+	anchor,
 }: {
-	normX: number;
-	normY: number;
-	rawNormX: number;
-	rawNormY: number;
-}): ResolvedPanGestureDirection | null => {
+	progress: number;
+	sourceBounds: MeasuredDimensions;
+	destinationBounds: MeasuredDimensions;
+	screenLayout: Layout;
+	dragX: number;
+	dragY: number;
+	gestureScale: number;
+	parentScale: number;
+	rotation?: number;
+	anchor?: BoundsAnchor;
+}) {
 	"worklet";
-	const motionX = Math.max(Math.abs(normX), Math.abs(rawNormX));
-	const motionY = Math.max(Math.abs(normY), Math.abs(rawNormY));
-
-	if (motionX <= EPSILON && motionY <= EPSILON) {
-		return null;
-	}
-
-	if (motionY > motionX + EPSILON) {
-		return normY < 0 || rawNormY < 0 ? "vertical-inverted" : "vertical";
-	}
 
-	if (motionX > motionY + EPSILON) {
-		return normX < 0 || rawNormX < 0 ? "horizontal-inverted" : "horizontal";
-	}
-
-	return null;
-};
-
-export function resolveZoomPanGestureDirection({
-	active,
-	direction,
-	normX,
-	normY,
-	rawNormX,
-	rawNormY,
-}: {
-	active: ActiveGesture | null | undefined;
-	direction: ActiveGesture | null | undefined;
-	normX: number;
-	normY: number;
-	rawNormX: number;
-	rawNormY: number;
-}): ResolvedPanGestureDirection | null {
-	"worklet";
-	const storedDirection = active ?? direction;
-	const motionDirection = resolveMotionDirection({
-		normX,
-		normY,
-		rawNormX,
-		rawNormY,
+	const contentBaseTransform = resolveRevealContentBaseTransform({
+		progress,
+		sourceBounds,
+		destinationBounds,
+		screenLayout,
+		anchor,
 	});
+	const collapsedContentScale = resolveRevealContentBaseTransform({
+		progress: 0,
+		sourceBounds,
+		destinationBounds,
+		screenLayout,
+		anchor,
+	}).scale;
+	const contentScale = contentBaseTransform.scale * gestureScale;
+	const safeCollapsedContentScale = Math.max(
+		Math.abs(collapsedContentScale),
+		EPSILON,
+	);
+	const safeParentScale = Math.max(Math.abs(parentScale), EPSILON);
+	const uniformSourceScale =
+		contentScale / (safeCollapsedContentScale * safeParentScale);
+	const trackedTransform = {
+		...resolveTrackedSourceElementTransform({
+			sourceBounds,
+			destinationBounds,
+			contentTranslateX: contentBaseTransform.translateX + dragX,
+			contentTranslateY: contentBaseTransform.translateY + dragY,
+			contentScale,
+			parentScale,
+			screenWidth: screenLayout.width,
+			screenHeight: screenLayout.height,
+		}),
+		scaleX: uniformSourceScale,
+		scaleY: uniformSourceScale,
+	};
 
-	if (!isResolvedPanDirection(storedDirection)) {
-		return motionDirection;
-	}
-
-	if (!motionDirection) {
-		return storedDirection;
-	}
-
-	const storedIsHorizontal =
-		storedDirection === "horizontal" ||
-		storedDirection === "horizontal-inverted";
-	const storedMotion = storedIsHorizontal
-		? Math.max(Math.abs(normX), Math.abs(rawNormX))
-		: Math.max(Math.abs(normY), Math.abs(rawNormY));
-	const oppositeMotion = storedIsHorizontal
-		? Math.max(Math.abs(normY), Math.abs(rawNormY))
-		: Math.max(Math.abs(normX), Math.abs(rawNormX));
-
-	if (oppositeMotion > storedMotion + EPSILON) {
-		return motionDirection;
+	if (Math.abs(rotation) <= EPSILON) {
+		return trackedTransform;
 	}
 
-	return storedDirection;
-}
+	const screenCenterX = screenLayout.width / 2;
+	const screenCenterY = screenLayout.height / 2;
+	const destinationCenterX =
+		destinationBounds.pageX + destinationBounds.width / 2;
+	const destinationCenterY =
+		destinationBounds.pageY + destinationBounds.height / 2;
+	const scaledOffsetX = (destinationCenterX - screenCenterX) * contentScale;
+	const scaledOffsetY = (destinationCenterY - screenCenterY) * contentScale;
+	const cosine = Math.cos(rotation);
+	const sine = Math.sin(rotation);
+	const rotatedOffsetX = scaledOffsetX * cosine - scaledOffsetY * sine;
+	const rotatedOffsetY = scaledOffsetX * sine + scaledOffsetY * cosine;
 
-export function interpolateOpacityRange(params: {
-	progress: number;
-	range: {
-		inputStart: number;
-		inputEnd: number;
-		outputStart: number;
-		outputEnd: number;
+	return {
+		...trackedTransform,
+		translateX:
+			trackedTransform.translateX +
+			(rotatedOffsetX - scaledOffsetX) / safeParentScale,
+		translateY:
+			trackedTransform.translateY +
+			(rotatedOffsetY - scaledOffsetY) / safeParentScale,
 	};
-}) {
-	"worklet";
-
-	const { progress, range } = params;
-
-	return interpolate(
-		progress,
-		[range.inputStart, range.inputEnd],
-		[range.outputStart, range.outputEnd],
-		"clamp",
-	);
 }