Make animation to look better with predictive back

13 files changed, 84 insertions, 200 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
index 32ab727370..3e95235d23 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
@@ -52,7 +52,7 @@ import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar
 import net.mullvad.mullvadvpn.compose.extensions.createOpenAccountPageHook
 import net.mullvad.mullvadvpn.compose.extensions.dropUnlessResumed
 import net.mullvad.mullvadvpn.compose.preview.AccountUiStatePreviewParameterProvider
-import net.mullvad.mullvadvpn.compose.transitions.SlideInFromBottomTransition
+import net.mullvad.mullvadvpn.compose.transitions.AccountTransition
 import net.mullvad.mullvadvpn.compose.util.CollectSideEffectWithLifecycle
 import net.mullvad.mullvadvpn.compose.util.SecureScreenWhileInView
 import net.mullvad.mullvadvpn.compose.util.createCopyToClipboardHandle
@@ -76,7 +76,7 @@ private fun PreviewAccountScreen(
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
-@Destination<RootGraph>(style = SlideInFromBottomTransition::class)
+@Destination<RootGraph>(style = AccountTransition::class)
 @Composable
 fun Account(
     navigator: DestinationsNavigator,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
index 7aeacd5553..c36f10212e 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
@@ -96,7 +96,7 @@ import net.mullvad.mullvadvpn.compose.test.SELECT_LOCATION_CUSTOM_LIST_BOTTOM_SH
 import net.mullvad.mullvadvpn.compose.test.SELECT_LOCATION_CUSTOM_LIST_HEADER_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.SELECT_LOCATION_LOCATION_BOTTOM_SHEET_TEST_TAG
 import net.mullvad.mullvadvpn.compose.textfield.SearchTextField
-import net.mullvad.mullvadvpn.compose.transitions.SelectLocationTransition
+import net.mullvad.mullvadvpn.compose.transitions.TopLevelTransition
 import net.mullvad.mullvadvpn.compose.util.CollectSideEffectWithLifecycle
 import net.mullvad.mullvadvpn.compose.util.RunOnKeyChange
 import net.mullvad.mullvadvpn.compose.util.showSnackbarImmediately
@@ -123,7 +123,7 @@ private fun PreviewSelectLocationScreen(
     AppTheme { SelectLocationScreen(state = state) }
 }
 
-@Destination<RootGraph>(style = SelectLocationTransition::class)
+@Destination<RootGraph>(style = TopLevelTransition::class)
 @Suppress("LongMethod")
 @Composable
 fun SelectLocation(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ServerIpOverridesScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ServerIpOverridesScreen.kt
index 7021969dfc..457103a022 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ServerIpOverridesScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ServerIpOverridesScreen.kt
@@ -70,7 +70,7 @@ import net.mullvad.mullvadvpn.compose.test.SERVER_IP_OVERRIDE_IMPORT_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.SERVER_IP_OVERRIDE_INFO_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.SERVER_IP_OVERRIDE_MORE_VERT_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.SERVER_IP_OVERRIDE_RESET_OVERRIDES_TEST_TAG
-import net.mullvad.mullvadvpn.compose.transitions.SlideInFromRightLeafTransition
+import net.mullvad.mullvadvpn.compose.transitions.SlideInFromRightTransition
 import net.mullvad.mullvadvpn.compose.util.CollectSideEffectWithLifecycle
 import net.mullvad.mullvadvpn.compose.util.OnNavResultValue
 import net.mullvad.mullvadvpn.compose.util.showSnackbarImmediately
@@ -102,7 +102,7 @@ private fun PreviewServerIpOverridesScreen(
     }
 }
 
-@Destination<RootGraph>(style = SlideInFromRightLeafTransition::class)
+@Destination<RootGraph>(style = SlideInFromRightTransition::class)
 @Composable
 fun ServerIpOverrides(
     navigator: DestinationsNavigator,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
index 46bb6dac6a..27beeeca4e 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
@@ -41,7 +41,7 @@ import net.mullvad.mullvadvpn.compose.extensions.itemWithDivider
 import net.mullvad.mullvadvpn.compose.preview.SettingsUiStatePreviewParameterProvider
 import net.mullvad.mullvadvpn.compose.state.SettingsUiState
 import net.mullvad.mullvadvpn.compose.test.LAZY_LIST_TEST_TAG
-import net.mullvad.mullvadvpn.compose.transitions.SettingsTransition
+import net.mullvad.mullvadvpn.compose.transitions.TopLevelTransition
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.util.appendHideNavOnPlayBuild
@@ -58,7 +58,7 @@ private fun PreviewSettingsScreen(
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
-@Destination<RootGraph>(style = SettingsTransition::class)
+@Destination<RootGraph>(style = TopLevelTransition::class)
 @Composable
 fun Settings(navigator: DestinationsNavigator) {
     val vm = koinViewModel<SettingsViewModel>()
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SlideInFromRightLeafTransition.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/AccountTransition.kt
index c27ec16254..6b6a9b3d0f 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SlideInFromRightLeafTransition.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/AccountTransition.kt
@@ -3,42 +3,36 @@ package net.mullvad.mullvadvpn.compose.transitions
 import androidx.compose.animation.AnimatedContentTransitionScope
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
-import androidx.compose.animation.core.snap
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.animation.slideInHorizontally
-import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.animation.scaleIn
 import androidx.navigation.NavBackStackEntry
-import com.ramcosta.composedestinations.generated.destinations.NoDaemonDestination
 import com.ramcosta.composedestinations.spec.DestinationStyle
-import com.ramcosta.composedestinations.utils.destination
-import net.mullvad.mullvadvpn.constant.SCREEN_ANIMATION_TIME_MILLIS
+import net.mullvad.mullvadvpn.constant.ENTER_TRANSITION_SCALE_IN_FACTOR
 
-object SlideInFromRightLeafTransition : DestinationStyle.Animated() {
+object AccountTransition : DestinationStyle.Animated() {
     override val enterTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
         {
-            slideInHorizontally(initialOffsetX = { it })
+            fadeIn(spring()) + scaleIn(initialScale = ENTER_TRANSITION_SCALE_IN_FACTOR)
         }
 
     override val exitTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
         {
-            when (targetState.destination()) {
-                NoDaemonDestination -> fadeOut(snap(SCREEN_ANIMATION_TIME_MILLIS))
-                else -> fadeOut()
-            }
+            fadeOut(spring())
         }
 
     override val popEnterTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
         {
-            fadeIn(snap(0))
+            fadeIn(spring())
         }
 
     override val popExitTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
         {
-            slideOutHorizontally(targetOffsetX = { it })
+            fadeOut(spring())
         }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/DefaultTransition.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/DefaultTransition.kt
index fa2211ad32..8f17b51b27 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/DefaultTransition.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/DefaultTransition.kt
@@ -3,6 +3,7 @@ package net.mullvad.mullvadvpn.compose.transitions
 import androidx.compose.animation.AnimatedContentTransitionScope
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.navigation.NavBackStackEntry
@@ -12,24 +13,24 @@ object DefaultTransition : DestinationStyle.Animated() {
     override val enterTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
         {
-            fadeIn()
+            fadeIn(spring())
         }
 
     override val exitTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
         {
-            fadeOut()
+            fadeOut(spring())
         }
 
     override val popEnterTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
         {
-            fadeIn()
+            fadeIn(spring())
         }
 
     override val popExitTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
         {
-            fadeOut()
+            fadeOut(spring())
         }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/HomeTransition.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/HomeTransition.kt
index 64fea22ae5..ab837f091d 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/HomeTransition.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/HomeTransition.kt
@@ -3,14 +3,11 @@ package net.mullvad.mullvadvpn.compose.transitions
 import androidx.compose.animation.AnimatedContentTransitionScope
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
-import androidx.compose.animation.core.snap
 import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
 import androidx.navigation.NavBackStackEntry
 import com.ramcosta.composedestinations.generated.destinations.LoginDestination
 import com.ramcosta.composedestinations.spec.DestinationStyle
 import com.ramcosta.composedestinations.utils.destination
-import net.mullvad.mullvadvpn.constant.SCREEN_ANIMATION_TIME_MILLIS
 
 // This is used for OutOfTime, Welcome, and Connect destinations.
 object HomeTransition : DestinationStyle.Animated() {
@@ -18,18 +15,16 @@ object HomeTransition : DestinationStyle.Animated() {
     override val enterTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
         {
-            when (this.initialState.destination()) {
-                is LoginDestination -> fadeIn()
+            when (initialState.destination()) {
+                LoginDestination -> fadeIn()
                 else -> EnterTransition.None
             }
         }
 
-    // TODO temporary hack until we have a proper solution.
-    // https://issuetracker.google.com/issues/309506799
     override val exitTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
         {
-            fadeOut(snap(SCREEN_ANIMATION_TIME_MILLIS))
+            ExitTransition.None
         }
 
     override val popEnterTransition:
@@ -41,6 +36,6 @@ object HomeTransition : DestinationStyle.Animated() {
     override val popExitTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
         {
-            fadeOut()
+            ExitTransition.None
         }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/LoginTransition.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/LoginTransition.kt
index 86c6f3f0dd..2c82d24d7c 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/LoginTransition.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/LoginTransition.kt
@@ -3,7 +3,7 @@ package net.mullvad.mullvadvpn.compose.transitions
 import androidx.compose.animation.AnimatedContentTransitionScope
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
-import androidx.compose.animation.core.snap
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.navigation.NavBackStackEntry
@@ -13,17 +13,14 @@ import com.ramcosta.composedestinations.generated.destinations.OutOfTimeDestinat
 import com.ramcosta.composedestinations.generated.destinations.WelcomeDestination
 import com.ramcosta.composedestinations.spec.DestinationStyle
 import com.ramcosta.composedestinations.utils.destination
-import net.mullvad.mullvadvpn.constant.SCREEN_ANIMATION_TIME_MILLIS
 
 object LoginTransition : DestinationStyle.Animated() {
     override val enterTransition:
         (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
         {
-            fadeIn()
+            fadeIn(spring())
         }
 
-    // TODO temporary hack until we have a proper solution.
-    // https://issuetracker.google.com/issues/309506799
     override val exitTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
         {
@@ -31,20 +28,20 @@ object LoginTransition : DestinationStyle.Animated() {
                 is OutOfTimeDestination,
                 is WelcomeDestination,
                 is ConnectDestination,
-                is DeviceListDestination -> fadeOut()
-                else -> fadeOut(snap(SCREEN_ANIMATION_TIME_MILLIS))
+                is DeviceListDestination -> fadeOut(spring())
+                else -> ExitTransition.None
             }
         }
 
     override val popEnterTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
         {
-            fadeIn()
+            fadeIn(spring())
         }
 
     override val popExitTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
         {
-            fadeOut()
+            fadeOut(spring())
         }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SettingsTransition.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SettingsTransition.kt
deleted file mode 100644
index d9c9bd2f58..0000000000
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SettingsTransition.kt
+++ /dev/null
@@ -1,51 +0,0 @@
-package net.mullvad.mullvadvpn.compose.transitions
-
-import androidx.compose.animation.AnimatedContentTransitionScope
-import androidx.compose.animation.EnterTransition
-import androidx.compose.animation.ExitTransition
-import androidx.compose.animation.core.snap
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.slideInHorizontally
-import androidx.compose.animation.slideInVertically
-import androidx.compose.animation.slideOutHorizontally
-import androidx.compose.animation.slideOutVertically
-import androidx.navigation.NavBackStackEntry
-import com.ramcosta.composedestinations.generated.destinations.NoDaemonDestination
-import com.ramcosta.composedestinations.spec.DestinationStyle
-import com.ramcosta.composedestinations.utils.destination
-import net.mullvad.mullvadvpn.constant.SCREEN_ANIMATION_TIME_MILLIS
-import net.mullvad.mullvadvpn.constant.withHorizontalScalingFactor
-
-object SettingsTransition : DestinationStyle.Animated() {
-
-    override val enterTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
-        {
-            slideInVertically(initialOffsetY = { it })
-        }
-
-    override val exitTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
-        {
-            when (targetState.destination()) {
-                NoDaemonDestination -> fadeOut(snap(SCREEN_ANIMATION_TIME_MILLIS))
-                else -> slideOutHorizontally(targetOffsetX = { -it.withHorizontalScalingFactor() })
-            }
-        }
-
-    override val popEnterTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
-        {
-            when (initialState.destination()) {
-                NoDaemonDestination -> fadeIn(snap(0))
-                else -> slideInHorizontally(initialOffsetX = { -it.withHorizontalScalingFactor() })
-            }
-        }
-
-    override val popExitTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
-        {
-            slideOutVertically(targetOffsetY = { it })
-        }
-}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SlideInFromBottomTransition.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SlideInFromBottomTransition.kt
deleted file mode 100644
index 7e796e5e01..0000000000
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SlideInFromBottomTransition.kt
+++ /dev/null
@@ -1,84 +0,0 @@
-package net.mullvad.mullvadvpn.compose.transitions
-
-import androidx.compose.animation.AnimatedContentTransitionScope
-import androidx.compose.animation.EnterTransition
-import androidx.compose.animation.ExitTransition
-import androidx.compose.animation.core.snap
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.slideInHorizontally
-import androidx.compose.animation.slideInVertically
-import androidx.compose.animation.slideOutHorizontally
-import androidx.compose.animation.slideOutVertically
-import androidx.navigation.NavBackStackEntry
-import com.ramcosta.composedestinations.generated.destinations.NoDaemonDestination
-import com.ramcosta.composedestinations.spec.DestinationStyle
-import com.ramcosta.composedestinations.utils.destination
-import net.mullvad.mullvadvpn.constant.SCREEN_ANIMATION_TIME_MILLIS
-import net.mullvad.mullvadvpn.constant.withHorizontalScalingFactor
-
-object SlideInFromBottomTransition : DestinationStyle.Animated() {
-    override val enterTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition? =
-        {
-            slideInVertically(initialOffsetY = { it })
-        }
-
-    override val exitTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition? =
-        {
-            when (targetState.destination()) {
-                NoDaemonDestination -> fadeOut(snap(SCREEN_ANIMATION_TIME_MILLIS))
-                else -> fadeOut()
-            }
-        }
-
-    override val popEnterTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
-        {
-            when (initialState.destination()) {
-                NoDaemonDestination -> fadeIn(snap(0))
-                else -> fadeIn()
-            }
-        }
-
-    override val popExitTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
-        {
-            slideOutVertically(targetOffsetY = { it })
-        }
-}
-
-object SelectLocationTransition : DestinationStyle.Animated() {
-    override val enterTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
-        {
-            slideInVertically(initialOffsetY = { it })
-        }
-
-    // TODO temporary hack until we have a proper solution.
-    // https://issuetracker.google.com/issues/309506799
-    override val exitTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
-        {
-            when (targetState.destination()) {
-                NoDaemonDestination -> fadeOut(snap(SCREEN_ANIMATION_TIME_MILLIS))
-                else -> slideOutHorizontally { -it.withHorizontalScalingFactor() }
-            }
-        }
-
-    override val popEnterTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
-        {
-            when (initialState.destination()) {
-                NoDaemonDestination -> fadeIn(snap(0))
-                else -> slideInHorizontally { -it.withHorizontalScalingFactor() }
-            }
-        }
-
-    override val popExitTransition:
-        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition? =
-        {
-            slideOutVertically(targetOffsetY = { it })
-        }
-}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SlideInFromRightTransition.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SlideInFromRightTransition.kt
index fe785e1f6a..290328ff9a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SlideInFromRightTransition.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/SlideInFromRightTransition.kt
@@ -3,46 +3,42 @@ package net.mullvad.mullvadvpn.compose.transitions
 import androidx.compose.animation.AnimatedContentTransitionScope
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
-import androidx.compose.animation.core.snap
+import androidx.compose.animation.core.spring
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.slideInHorizontally
 import androidx.compose.animation.slideOutHorizontally
 import androidx.navigation.NavBackStackEntry
-import com.ramcosta.composedestinations.generated.destinations.NoDaemonDestination
 import com.ramcosta.composedestinations.spec.DestinationStyle
-import com.ramcosta.composedestinations.utils.destination
-import net.mullvad.mullvadvpn.constant.SCREEN_ANIMATION_TIME_MILLIS
-import net.mullvad.mullvadvpn.constant.withHorizontalScalingFactor
+import net.mullvad.mullvadvpn.constant.ENTER_TRANSITION_SLIDE_FACTOR
+import net.mullvad.mullvadvpn.constant.EXIT_TRANSITION_SLIDE_FACTOR
 
 object SlideInFromRightTransition : DestinationStyle.Animated() {
     override val enterTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
         {
-            slideInHorizontally(initialOffsetX = { it })
+            fadeIn(spring()) +
+                slideInHorizontally(
+                    initialOffsetX = { (it * ENTER_TRANSITION_SLIDE_FACTOR).toInt() }
+                )
         }
 
     override val exitTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
         {
-            when (targetState.destination()) {
-                NoDaemonDestination -> fadeOut(snap(SCREEN_ANIMATION_TIME_MILLIS))
-                else -> slideOutHorizontally(targetOffsetX = { -it.withHorizontalScalingFactor() })
-            }
+            ExitTransition.None
         }
 
     override val popEnterTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
         {
-            when (initialState.destination()) {
-                NoDaemonDestination -> fadeIn(snap(0))
-                else -> slideInHorizontally(initialOffsetX = { -it.withHorizontalScalingFactor() })
-            }
+            EnterTransition.None
         }
 
     override val popExitTransition:
         AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
         {
-            slideOutHorizontally(targetOffsetX = { it })
+            slideOutHorizontally(targetOffsetX = { (it * EXIT_TRANSITION_SLIDE_FACTOR).toInt() }) +
+                fadeOut(spring())
         }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/TopLevelTransition.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/TopLevelTransition.kt
new file mode 100644
index 0000000000..60a8402721
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/transitions/TopLevelTransition.kt
@@ -0,0 +1,39 @@
+package net.mullvad.mullvadvpn.compose.transitions
+
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.core.spring
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.navigation.NavBackStackEntry
+import com.ramcosta.composedestinations.spec.DestinationStyle
+import net.mullvad.mullvadvpn.constant.ENTER_TRANSITION_SCALE_IN_FACTOR
+
+object TopLevelTransition : DestinationStyle.Animated() {
+
+    override val enterTransition:
+        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
+        {
+            fadeIn(spring()) + scaleIn(initialScale = ENTER_TRANSITION_SCALE_IN_FACTOR)
+        }
+
+    override val exitTransition:
+        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
+        {
+            ExitTransition.None
+        }
+
+    override val popEnterTransition:
+        AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition =
+        {
+            EnterTransition.None
+        }
+
+    override val popExitTransition:
+        AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition =
+        {
+            fadeOut(spring())
+        }
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/constant/AnimationConstant.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/constant/AnimationConstant.kt
index 8efe66085f..c84935af12 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/constant/AnimationConstant.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/constant/AnimationConstant.kt
@@ -1,17 +1,14 @@
 package net.mullvad.mullvadvpn.constant
 
-import androidx.compose.animation.core.Spring
 import net.mullvad.mullvadvpn.lib.model.LatLong
 import net.mullvad.mullvadvpn.lib.model.Latitude
 import net.mullvad.mullvadvpn.lib.model.Longitude
 
 const val MINIMUM_LOADING_TIME_MILLIS = 500L
 
-const val SCREEN_ANIMATION_TIME_MILLIS = Spring.StiffnessMediumLow.toInt()
-
-const val HORIZONTAL_SLIDE_FACTOR = 1 / 3f
-
-fun Int.withHorizontalScalingFactor(): Int = (this * HORIZONTAL_SLIDE_FACTOR).toInt()
+const val ENTER_TRANSITION_SCALE_IN_FACTOR = 1.1f
+const val ENTER_TRANSITION_SLIDE_FACTOR = 0.25f
+const val EXIT_TRANSITION_SLIDE_FACTOR = 0.1f
 
 const val SECURE_ZOOM = 1.15f
 const val UNSECURE_ZOOM = 1.20f