diff --git a/app/src/examples/ScreenTransitionExample.tsx b/app/src/examples/ScreenTransitionExample.tsx
new file mode 100644
index 000000000000..d9951707b358
--- /dev/null
+++ b/app/src/examples/ScreenTransitionExample.tsx
@@ -0,0 +1,115 @@
+// @ts-nocheck - It will be removed after release of react-native-screens, because currently 'react-native-screens/gesture-handler' import doesn't exist.
+import React from 'react';
+import { View, StyleSheet, Button } from 'react-native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from 'react-native-screens/native-stack';
+import { ParamListBase } from '@react-navigation/native';
+import {
+  ScreenTransition,
+  AnimatedScreenTransition,
+} from 'react-native-reanimated';
+
+// This is a temporary workaround until react-native-screens release with 'react-native-screens/gesture-handler' import.
+// import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
+function GestureDetectorProvider({ children }) {
+  return children;
+}
+
+function MainScreen({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  return (
+    <View style={[styles.container, styles.screenA]}>
+      <Button
+        title="Go ScreenB"
+        onPress={() => navigation.navigate('ScreenB')}
+      />
+      <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
+    </View>
+  );
+}
+
+function ScreenB({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  return (
+    <View style={[styles.container, styles.screenB]}>
+      <Button
+        title="Go ScreenC"
+        onPress={() => navigation.navigate('ScreenC')}
+      />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+function ScreenC({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  return (
+    <View style={[styles.container, styles.screenC]}>
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator();
+
+const customTransition: AnimatedScreenTransition = {
+  topScreenFrame: (event, screenSize) => {
+    'worklet';
+    const progress = event.translationX / screenSize.width;
+    return {
+      transform: [
+        { translateX: event.translationX },
+        { rotate: `${20 * progress}deg` },
+      ],
+    };
+  },
+  belowTopScreenFrame: (event, screenSize) => {
+    'worklet';
+    const progress = event.translationX / screenSize.width;
+    return {
+      transform: [{ scale: 0.7 + 0.3 * progress }],
+    };
+  },
+};
+
+function ScreenTransitionExample(): JSX.Element {
+  return (
+    <GestureDetectorProvider>
+      <Stack.Navigator
+        screenOptions={{
+          headerHideBackButton: true,
+          stackAnimation: 'none',
+          goBackGesture: 'swipeRight',
+        }}>
+        <Stack.Screen name="ScreenA" component={MainScreen} />
+        <Stack.Screen
+          name="ScreenB"
+          component={ScreenB}
+          options={{ transitionAnimation: customTransition }}
+        />
+        <Stack.Screen
+          name="ScreenC"
+          component={ScreenC}
+          options={{ transitionAnimation: ScreenTransition.SwipeRightFade }}
+        />
+      </Stack.Navigator>
+    </GestureDetectorProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 10,
+  },
+  screenA: {
+    backgroundColor: 'moccasin',
+  },
+  screenB: {
+    backgroundColor: 'thistle',
+  },
+  screenC: {
+    backgroundColor: 'blue',
+  },
+});
+
+export default ScreenTransitionExample;
diff --git a/app/src/examples/ScreenTransitionExample.web.tsx b/app/src/examples/ScreenTransitionExample.web.tsx
new file mode 100644
index 000000000000..774d8d81c487
--- /dev/null
+++ b/app/src/examples/ScreenTransitionExample.web.tsx
@@ -0,0 +1,19 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import React from 'react';
+
+export default function ScreenTransitionExample() {
+  return (
+    <View style={styles.container}>
+      <Text>Screen transition example is not supported on web</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
diff --git a/app/src/examples/index.ts b/app/src/examples/index.ts
index c077f279d2e6..118f37b2cbba 100644
--- a/app/src/examples/index.ts
+++ b/app/src/examples/index.ts
@@ -122,6 +122,7 @@ import WorkletFactoryCrash from './WorkletFactoryCrashExample';
 import RuntimeTestsExample from './RuntimeTests/RuntimeTestsExample';
 import HabitsExample from './LayoutAnimations/HabitsExample';
 import MemoExample from './MemoExample';
+import ScreenTransitionExample from './ScreenTransitionExample';
 
 interface Example {
   icon?: string;
@@ -131,7 +132,6 @@ interface Example {
 
 export const EXAMPLES: Record<string, Example> = {
   // Empty example for test purposes
-
   EmptyExample: {
     icon: '👻',
     title: 'Empty',
@@ -238,6 +238,11 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'Update props performance',
     screen: UpdatePropsPerfExample,
   },
+  ScreenTransitionExample: {
+    icon: '📺',
+    title: 'Screen transition',
+    screen: ScreenTransitionExample,
+  },
 
   // Basic examples
 
diff --git a/src/ConfigHelper.ts b/src/ConfigHelper.ts
index c0f9691b670d..811bc9b699ae 100644
--- a/src/ConfigHelper.ts
+++ b/src/ConfigHelper.ts
@@ -11,7 +11,7 @@ function assertNoOverlapInLists() {
   }
 }
 
-function configureProps(): void {
+export function configureProps(): void {
   assertNoOverlapInLists();
   jsiConfigureProps(
     Object.keys(PropsAllowlists.UI_THREAD_PROPS_WHITELIST),
diff --git a/src/reanimated2/globals.d.ts b/src/reanimated2/globals.d.ts
index cc882c92479c..8f9879d4d010 100644
--- a/src/reanimated2/globals.d.ts
+++ b/src/reanimated2/globals.d.ts
@@ -18,6 +18,7 @@ import type { ProgressTransitionRegister } from './layoutReanimation/sharedTrans
 import type { UpdatePropsManager } from './UpdateProps';
 import type { callGuardDEV } from './initializers';
 import type { WorkletRuntime } from './runtimes';
+import type { RNScreensTurboModuleType } from './screenTransition/commonTypes';
 
 declare global {
   var _REANIMATED_IS_REDUCED_MOTION: boolean | undefined;
@@ -105,6 +106,7 @@ declare global {
   var UpdatePropsManager: UpdatePropsManager;
   var ProgressTransitionRegister: ProgressTransitionRegister;
   var updateJSProps: (viewTag: number, props: Record<string, unknown>) => void;
+  var RNScreensTurboModule: RNScreensTurboModuleType | undefined;
   var _obtainPropPaper: (viewTag: number, propName: string) => string;
   var _obtainPropFabric: (
     shadowNodeWrapper: ShadowNodeWrapper,
diff --git a/src/reanimated2/index.ts b/src/reanimated2/index.ts
index c8e0fc1d79ec..dab75bc73537 100644
--- a/src/reanimated2/index.ts
+++ b/src/reanimated2/index.ts
@@ -273,3 +273,13 @@ export type {
 export type { AnimatedScrollViewProps } from './component/ScrollView';
 export type { FlatListPropsWithLayout } from './component/FlatList';
 export { startMapper, stopMapper } from './mappers';
+export {
+  startScreenTransition,
+  finishScreenTransition,
+  ScreenTransition,
+} from './screenTransition';
+export type {
+  AnimatedScreenTransition,
+  GoBackGesture,
+  ScreenTransitionConfig,
+} from './screenTransition';
diff --git a/src/reanimated2/screenTransition/RNScreensTurboModule.ts b/src/reanimated2/screenTransition/RNScreensTurboModule.ts
new file mode 100644
index 000000000000..c5c975078268
--- /dev/null
+++ b/src/reanimated2/screenTransition/RNScreensTurboModule.ts
@@ -0,0 +1,29 @@
+'use strict';
+import type { RNScreensTurboModuleType } from './commonTypes';
+
+function noopFactory<T>(defaultReturnValue?: T): () => T {
+  return () => {
+    'worklet';
+    console.warn(
+      '[Reanimated] RNScreensTurboModule has not been found. Check that you have installed `react-native-screens@3.30.0` or newer in your project and rebuilt your app.'
+    );
+    return defaultReturnValue as T;
+  };
+}
+
+type TransactionConfig = {
+  topScreenId: number;
+  belowTopScreenId: number;
+  canStartTransition: boolean;
+};
+
+export const RNScreensTurboModule: RNScreensTurboModuleType =
+  global.RNScreensTurboModule || {
+    startTransition: noopFactory<TransactionConfig>({
+      topScreenId: -1,
+      belowTopScreenId: -1,
+      canStartTransition: false,
+    }),
+    updateTransition: noopFactory(),
+    finishTransition: noopFactory(),
+  };
diff --git a/src/reanimated2/screenTransition/animationManager.ts b/src/reanimated2/screenTransition/animationManager.ts
new file mode 100644
index 000000000000..d8c426783c9b
--- /dev/null
+++ b/src/reanimated2/screenTransition/animationManager.ts
@@ -0,0 +1,45 @@
+'use strict';
+
+import type { LockAxis, ScreenTransitionConfig } from './commonTypes';
+import { configureProps } from '../../ConfigHelper';
+import { applyStyle } from './styleUpdater';
+import { getSwipeSimulator } from './swipeSimulator';
+
+configureProps();
+
+export function startScreenTransition(
+  screenTransitionConfig: ScreenTransitionConfig
+) {
+  'worklet';
+  const { stackTag, sharedEvent } = screenTransitionConfig;
+  sharedEvent.addListener(stackTag, () => {
+    applyStyle(screenTransitionConfig, sharedEvent.value);
+  });
+}
+
+function getLockAxis(goBackGesture: string): LockAxis {
+  'worklet';
+  if (['swipeRight', 'swipeLeft', 'horizontalSwipe'].includes(goBackGesture)) {
+    return 'x';
+  } else if (
+    ['swipeUp', 'swipeDown', 'verticalSwipe'].includes(goBackGesture)
+  ) {
+    return 'y';
+  }
+  return undefined;
+}
+
+export function finishScreenTransition(
+  screenTransitionConfig: ScreenTransitionConfig
+) {
+  'worklet';
+  const { stackTag, sharedEvent, goBackGesture } = screenTransitionConfig;
+  sharedEvent.removeListener(stackTag);
+  const lockAxis = getLockAxis(goBackGesture);
+  const step = getSwipeSimulator(
+    sharedEvent.value,
+    screenTransitionConfig,
+    lockAxis
+  );
+  step();
+}
diff --git a/src/reanimated2/screenTransition/commonTypes.ts b/src/reanimated2/screenTransition/commonTypes.ts
new file mode 100644
index 000000000000..ec1442460ba1
--- /dev/null
+++ b/src/reanimated2/screenTransition/commonTypes.ts
@@ -0,0 +1,63 @@
+'use strict';
+
+import type {
+  MeasuredDimensions,
+  ShadowNodeWrapper,
+  SharedValue,
+} from '../commonTypes';
+
+export type PanGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  translationX: number;
+  translationY: number;
+  velocityX: number;
+  velocityY: number;
+};
+
+export type AnimatedScreenTransition = {
+  topScreenFrame: (
+    event: PanGestureHandlerEventPayload,
+    screenDimensions: MeasuredDimensions
+  ) => Record<string, unknown>;
+  belowTopScreenFrame: (
+    event: PanGestureHandlerEventPayload,
+    screenDimensions: MeasuredDimensions
+  ) => Record<string, unknown>;
+};
+
+export type GoBackGesture =
+  | 'swipeRight'
+  | 'swipeLeft'
+  | 'swipeUp'
+  | 'swipeDown'
+  | 'verticalSwipe'
+  | 'horizontalSwipe'
+  | 'twoDimensionalSwipe';
+
+export type ScreenTransitionConfig = {
+  stackTag: number;
+  belowTopScreenId: number | ShadowNodeWrapper;
+  topScreenId: number | ShadowNodeWrapper;
+  screenTransition: AnimatedScreenTransition;
+  sharedEvent: SharedValue<PanGestureHandlerEventPayload>;
+  startingGesturePosition: SharedValue<PanGestureHandlerEventPayload>;
+  onFinishAnimation?: () => void;
+  isTransitionCanceled: boolean;
+  goBackGesture: GoBackGesture;
+  screenDimensions: MeasuredDimensions;
+};
+
+export type RNScreensTurboModuleType = {
+  startTransition: (stackTag: number) => {
+    topScreenId: number | ShadowNodeWrapper;
+    belowTopScreenId: number | ShadowNodeWrapper;
+    canStartTransition: boolean;
+  };
+  updateTransition: (stackTag: number, progress: number) => void;
+  finishTransition: (stackTag: number, isCanceled: boolean) => void;
+};
+
+export type LockAxis = 'x' | 'y' | undefined;
diff --git a/src/reanimated2/screenTransition/index.ts b/src/reanimated2/screenTransition/index.ts
new file mode 100644
index 000000000000..c87eec8f5510
--- /dev/null
+++ b/src/reanimated2/screenTransition/index.ts
@@ -0,0 +1,12 @@
+'use strict';
+
+export {
+  startScreenTransition,
+  finishScreenTransition,
+} from './animationManager';
+export { ScreenTransition } from './presets';
+export type {
+  AnimatedScreenTransition,
+  GoBackGesture,
+  ScreenTransitionConfig,
+} from './commonTypes';
diff --git a/src/reanimated2/screenTransition/presets.ts b/src/reanimated2/screenTransition/presets.ts
new file mode 100644
index 000000000000..42132d3b8fdb
--- /dev/null
+++ b/src/reanimated2/screenTransition/presets.ts
@@ -0,0 +1,137 @@
+'use strict';
+
+import type { AnimatedScreenTransition } from './commonTypes';
+
+const SwipeRight: AnimatedScreenTransition = {
+  topScreenFrame: (event) => {
+    'worklet';
+    return {
+      transform: [{ translateX: event.translationX }],
+    };
+  },
+  belowTopScreenFrame: (event, screenSize) => {
+    'worklet';
+    return {
+      transform: [
+        { translateX: (event.translationX - screenSize.width) * 0.3 },
+      ],
+    };
+  },
+};
+
+const SwipeLeft: AnimatedScreenTransition = {
+  topScreenFrame: (event) => {
+    'worklet';
+    return {
+      transform: [{ translateX: event.translationX }],
+    };
+  },
+  belowTopScreenFrame: (event, screenSize) => {
+    'worklet';
+    return {
+      transform: [
+        { translateX: (event.translationX + screenSize.width) * 0.3 },
+      ],
+    };
+  },
+};
+
+const SwipeDown: AnimatedScreenTransition = {
+  topScreenFrame: (event) => {
+    'worklet';
+    return {
+      transform: [{ translateY: event.translationY }],
+    };
+  },
+  belowTopScreenFrame: (event, screenSize) => {
+    'worklet';
+    return {
+      transform: [
+        { translateY: (event.translationY - screenSize.height) * 0.3 },
+      ],
+    };
+  },
+};
+
+const SwipeUp: AnimatedScreenTransition = {
+  topScreenFrame: (event) => {
+    'worklet';
+    return {
+      transform: [{ translateY: event.translationY }],
+    };
+  },
+  belowTopScreenFrame: (event, screenSize) => {
+    'worklet';
+    return {
+      transform: [
+        { translateY: (event.translationY + screenSize.height) * 0.3 },
+      ],
+    };
+  },
+};
+
+const TwoDimensional: AnimatedScreenTransition = {
+  topScreenFrame: (event, _screenSize) => {
+    'worklet';
+    return {
+      transform: [
+        { translateX: event.translationX },
+        { translateY: event.translationY },
+      ],
+    };
+  },
+  belowTopScreenFrame: (_event, _screenSize) => {
+    'worklet';
+    return {};
+  },
+};
+
+const Horizontal: AnimatedScreenTransition = {
+  topScreenFrame: (event, _screenSize) => {
+    'worklet';
+    return {
+      transform: [{ translateX: event.translationX }],
+    };
+  },
+  belowTopScreenFrame: (_event, _screenSize) => {
+    'worklet';
+    return {};
+  },
+};
+
+const Vertical: AnimatedScreenTransition = {
+  topScreenFrame: (event, _screenSize) => {
+    'worklet';
+    return {
+      transform: [{ translateY: event.translationY }],
+    };
+  },
+  belowTopScreenFrame: (_event, _screenSize) => {
+    'worklet';
+    return {};
+  },
+};
+
+const SwipeRightFade: AnimatedScreenTransition = {
+  topScreenFrame: (event, screenSize) => {
+    'worklet';
+    return {
+      opacity: 1 - Math.abs(event.translationX / screenSize.width),
+    };
+  },
+  belowTopScreenFrame: (_event, _screenSize) => {
+    'worklet';
+    return {};
+  },
+};
+
+export const ScreenTransition = {
+  SwipeRight,
+  SwipeLeft,
+  SwipeDown,
+  SwipeUp,
+  Horizontal,
+  Vertical,
+  TwoDimensional,
+  SwipeRightFade,
+};
diff --git a/src/reanimated2/screenTransition/styleUpdater.ts b/src/reanimated2/screenTransition/styleUpdater.ts
new file mode 100644
index 000000000000..133c25f84037
--- /dev/null
+++ b/src/reanimated2/screenTransition/styleUpdater.ts
@@ -0,0 +1,70 @@
+'use strict';
+import { isFabric } from '../PlatformChecker';
+import updateProps from '../UpdateProps';
+import type { ShadowNodeWrapper, SharedValue } from '../commonTypes';
+import type { Descriptor } from '../hook/commonTypes';
+import type {
+  PanGestureHandlerEventPayload,
+  ScreenTransitionConfig,
+} from './commonTypes';
+
+const IS_FABRIC = isFabric();
+
+function createViewDescriptorPaper(screenId: number | ShadowNodeWrapper) {
+  'worklet';
+  return { tag: screenId, name: 'RCTView' };
+}
+function createViewDescriptorFabric(screenId: number | ShadowNodeWrapper) {
+  'worklet';
+  return { shadowNodeWrapper: screenId };
+}
+const createViewDescriptor = IS_FABRIC
+  ? createViewDescriptorFabric
+  : createViewDescriptorPaper;
+
+function applyStyleForTopScreen(
+  screenTransitionConfig: ScreenTransitionConfig,
+  event: PanGestureHandlerEventPayload
+) {
+  'worklet';
+  const { screenDimensions, topScreenId, screenTransition } =
+    screenTransitionConfig;
+  const { topScreenFrame } = screenTransition;
+  const topScreenStyle = topScreenFrame(event, screenDimensions);
+  const topScreenDescriptor = {
+    value: [createViewDescriptor(topScreenId)],
+  };
+  updateProps(
+    topScreenDescriptor as SharedValue<Descriptor[]>,
+    topScreenStyle,
+    undefined
+  );
+}
+
+export function applyStyleForBelowTopScreen(
+  screenTransitionConfig: ScreenTransitionConfig,
+  event: PanGestureHandlerEventPayload
+) {
+  'worklet';
+  const { screenDimensions, belowTopScreenId, screenTransition } =
+    screenTransitionConfig;
+  const { belowTopScreenFrame } = screenTransition;
+  const belowTopScreenStyle = belowTopScreenFrame(event, screenDimensions);
+  const belowTopScreenDescriptor = {
+    value: [createViewDescriptor(belowTopScreenId)],
+  };
+  updateProps(
+    belowTopScreenDescriptor as SharedValue<Descriptor[]>,
+    belowTopScreenStyle,
+    undefined
+  );
+}
+
+export function applyStyle(
+  screenTransitionConfig: ScreenTransitionConfig,
+  event: PanGestureHandlerEventPayload
+) {
+  'worklet';
+  applyStyleForTopScreen(screenTransitionConfig, event);
+  applyStyleForBelowTopScreen(screenTransitionConfig, event);
+}
diff --git a/src/reanimated2/screenTransition/swipeSimulator.ts b/src/reanimated2/screenTransition/swipeSimulator.ts
new file mode 100644
index 000000000000..3f14065a7bf5
--- /dev/null
+++ b/src/reanimated2/screenTransition/swipeSimulator.ts
@@ -0,0 +1,222 @@
+'use strict';
+import type {
+  PanGestureHandlerEventPayload,
+  ScreenTransitionConfig,
+  LockAxis,
+} from './commonTypes';
+import { applyStyle, applyStyleForBelowTopScreen } from './styleUpdater';
+import { RNScreensTurboModule } from './RNScreensTurboModule';
+
+const BASE_VELOCITY = 300;
+
+function computeEasingProgress(
+  startingTimestamp: number,
+  distance: number,
+  velocity: number
+) {
+  'worklet';
+  if (Math.abs(distance) < 1) {
+    return 1;
+  }
+  const elapsedTime = (_getAnimationTimestamp() - startingTimestamp) / 1000;
+  const currentPosition = velocity * elapsedTime;
+  const progress = currentPosition / distance;
+  return progress;
+}
+
+function easing(x: number): number {
+  'worklet';
+  // based on https://easings.net/#easeOutQuart
+  return 1 - Math.pow(1 - x, 5);
+}
+
+function computeProgress(
+  screenTransitionConfig: ScreenTransitionConfig,
+  event: PanGestureHandlerEventPayload,
+  isTransitionCanceled: boolean
+) {
+  'worklet';
+  const screenDimensions = screenTransitionConfig.screenDimensions;
+  const progressX = Math.abs(event.translationX / screenDimensions.width);
+  const progressY = Math.abs(event.translationY / screenDimensions.height);
+  const maxProgress = Math.max(progressX, progressY);
+  const progress = isTransitionCanceled ? maxProgress / 2 : maxProgress;
+  return progress;
+}
+
+function maybeScheduleNextFrame(
+  step: () => void,
+  didScreenReachDestination: boolean,
+  screenTransitionConfig: ScreenTransitionConfig,
+  event: PanGestureHandlerEventPayload,
+  isTransitionCanceled: boolean
+) {
+  'worklet';
+  if (!didScreenReachDestination) {
+    const stackTag = screenTransitionConfig.stackTag;
+    const progress = computeProgress(
+      screenTransitionConfig,
+      event,
+      isTransitionCanceled
+    );
+    RNScreensTurboModule.updateTransition(stackTag, progress);
+    requestAnimationFrame(step);
+  } else {
+    screenTransitionConfig.onFinishAnimation?.();
+  }
+}
+
+export function getSwipeSimulator(
+  event: PanGestureHandlerEventPayload,
+  screenTransitionConfig: ScreenTransitionConfig,
+  lockAxis?: LockAxis
+) {
+  'worklet';
+  const screenDimensions = screenTransitionConfig.screenDimensions;
+  const startTimestamp = _getAnimationTimestamp();
+  const { isTransitionCanceled } = screenTransitionConfig;
+  const startingPosition = {
+    x: event.translationX,
+    y: event.translationY,
+  };
+  const direction = {
+    x: Math.sign(event.translationX),
+    y: Math.sign(event.translationY),
+  };
+  const finalPosition = isTransitionCanceled
+    ? { x: 0, y: 0 }
+    : {
+        x: direction.x * screenDimensions.width,
+        y: direction.y * screenDimensions.height,
+      };
+  const distance = {
+    x: Math.abs(finalPosition.x - startingPosition.x),
+    y: Math.abs(finalPosition.y - startingPosition.y),
+  };
+  const didScreenReachDestination = {
+    x: false,
+    y: false,
+  };
+  const velocity = { x: BASE_VELOCITY, y: BASE_VELOCITY };
+  if (lockAxis === 'x') {
+    velocity.y = 0;
+  } else if (lockAxis === 'y') {
+    velocity.x = 0;
+  } else {
+    if (Math.abs(startingPosition.x) > Math.abs(startingPosition.y)) {
+      velocity.x = BASE_VELOCITY;
+      velocity.y =
+        BASE_VELOCITY * Math.abs(startingPosition.y / startingPosition.x);
+    } else {
+      velocity.x =
+        BASE_VELOCITY * Math.abs(startingPosition.x / startingPosition.y);
+      velocity.y = BASE_VELOCITY;
+    }
+  }
+
+  if (isTransitionCanceled) {
+    function didScreenReachDestinationCheck() {
+      if (lockAxis === 'x') {
+        return didScreenReachDestination.x;
+      } else if (lockAxis === 'y') {
+        return didScreenReachDestination.y;
+      } else {
+        return didScreenReachDestination.x && didScreenReachDestination.y;
+      }
+    }
+
+    function restoreOriginalStyleForBelowTopScreen() {
+      event.translationX = direction.x * screenDimensions.width;
+      event.translationY = direction.y * screenDimensions.height;
+      applyStyleForBelowTopScreen(screenTransitionConfig, event);
+    }
+
+    const computeFrame = () => {
+      const progress = {
+        x: computeEasingProgress(startTimestamp, distance.x, velocity.x),
+        y: computeEasingProgress(startTimestamp, distance.y, velocity.y),
+      };
+      event.translationX =
+        startingPosition.x - direction.x * distance.x * easing(progress.x);
+      event.translationY =
+        startingPosition.y - direction.y * distance.y * easing(progress.y);
+      if (direction.x > 0) {
+        if (event.translationX <= 0) {
+          didScreenReachDestination.x = true;
+          event.translationX = 0;
+        }
+      } else {
+        if (event.translationX >= 0) {
+          didScreenReachDestination.x = true;
+          event.translationX = 0;
+        }
+      }
+      if (direction.y > 0) {
+        if (event.translationY <= 0) {
+          didScreenReachDestination.y = true;
+          event.translationY = 0;
+        }
+      } else {
+        if (event.translationY >= 0) {
+          didScreenReachDestination.y = true;
+          event.translationY = 0;
+        }
+      }
+      applyStyle(screenTransitionConfig, event);
+      const finished = didScreenReachDestinationCheck();
+      if (finished) {
+        restoreOriginalStyleForBelowTopScreen();
+      }
+      maybeScheduleNextFrame(
+        computeFrame,
+        finished,
+        screenTransitionConfig,
+        event,
+        isTransitionCanceled
+      );
+    };
+    return computeFrame;
+  } else {
+    const computeFrame = () => {
+      const progress = {
+        x: computeEasingProgress(startTimestamp, distance.x, velocity.x),
+        y: computeEasingProgress(startTimestamp, distance.y, velocity.y),
+      };
+      event.translationX =
+        startingPosition.x + direction.x * distance.x * easing(progress.x);
+      event.translationY =
+        startingPosition.y + direction.y * distance.y * easing(progress.y);
+      if (direction.x > 0) {
+        if (event.translationX >= screenDimensions.width) {
+          didScreenReachDestination.x = true;
+          event.translationX = screenDimensions.width;
+        }
+      } else {
+        if (event.translationX <= -screenDimensions.width) {
+          didScreenReachDestination.x = true;
+          event.translationX = -screenDimensions.width;
+        }
+      }
+      if (direction.y > 0) {
+        if (event.translationY >= screenDimensions.height) {
+          didScreenReachDestination.y = true;
+          event.translationY = screenDimensions.height;
+        }
+      } else {
+        if (event.translationY <= -screenDimensions.height) {
+          didScreenReachDestination.y = true;
+          event.translationY = -screenDimensions.height;
+        }
+      }
+      applyStyle(screenTransitionConfig, event);
+      maybeScheduleNextFrame(
+        computeFrame,
+        didScreenReachDestination.x || didScreenReachDestination.y,
+        screenTransitionConfig,
+        event,
+        isTransitionCanceled
+      );
+    };
+    return computeFrame;
+  }
+}