Animation between screens

app/src/main/kotlin/io/element/android/x/node/LoggedInFlowNode.kt

@@ -34,6 +34,7 @@ import com.bumble.appyx.navmodel.backstack.BackStack
 import com.bumble.appyx.navmodel.backstack.operation.push
 import io.element.android.features.preferences.PreferencesFlowNode
 import io.element.android.features.roomlist.RoomListNode
+import io.element.android.libraries.architecture.animation.getDefaultTransitionHandler
 import io.element.android.libraries.architecture.bindings
 import io.element.android.libraries.architecture.createNode
 import io.element.android.libraries.di.DaggerComponentOwner
@@ -127,6 +128,8 @@ class LoggedInFlowNode(
         Children(
             navModel = backstack,
             modifier = modifier,
+            // Animate navigation to settings and to a room
+            transitionHandler = getDefaultTransitionHandler(),
         )
     }
 }

app/src/main/kotlin/io/element/android/x/node/NotLoggedInFlowNode.kt

@@ -29,6 +29,7 @@ import com.bumble.appyx.navmodel.backstack.BackStack
 import com.bumble.appyx.navmodel.backstack.operation.replace
 import io.element.android.features.login.LoginFlowNode
 import io.element.android.features.onboarding.OnBoardingScreen
+import io.element.android.libraries.architecture.animation.getDefaultTransitionHandler
 import kotlinx.parcelize.Parcelize
 import timber.log.Timber
 
@@ -74,6 +75,8 @@ class NotLoggedInFlowNode(
         Children(
             navModel = backstack,
             modifier = modifier,
+            // Animate navigation to login screen
+            transitionHandler = getDefaultTransitionHandler(),
         )
     }
 }

app/src/main/kotlin/io/element/android/x/node/RootFlowNode.kt

@@ -36,10 +36,11 @@ import com.bumble.appyx.navmodel.backstack.BackStack
 import com.bumble.appyx.navmodel.backstack.operation.newRoot
 import com.bumble.appyx.navmodel.backstack.operation.pop
 import com.bumble.appyx.navmodel.backstack.operation.push
+import io.element.android.features.rageshake.bugreport.BugReportNode
+import io.element.android.libraries.architecture.animation.getDefaultTransitionHandler
 import io.element.android.libraries.architecture.createNode
 import io.element.android.libraries.architecture.presenterConnector
 import io.element.android.libraries.di.DaggerComponentOwner
-import io.element.android.features.rageshake.bugreport.BugReportNode
 import io.element.android.libraries.matrix.MatrixClient
 import io.element.android.libraries.matrix.auth.MatrixAuthenticationService
 import io.element.android.libraries.matrix.core.SessionId
@@ -110,7 +111,11 @@ class RootFlowNode(
             modifier = modifier,
             onOpenBugReport = this::onOpenBugReport,
         ) {
-            Children(navModel = backstack)
+            Children(
+                navModel = backstack,
+                // Animate opening the bug report screen
+                transitionHandler = getDefaultTransitionHandler(),
+            )
         }
     }
 

features/login/src/main/kotlin/io/element/android/features/login/LoginFlowNode.kt

@@ -25,9 +25,10 @@ import com.bumble.appyx.core.node.Node
 import com.bumble.appyx.core.node.ParentNode
 import com.bumble.appyx.navmodel.backstack.BackStack
 import com.bumble.appyx.navmodel.backstack.operation.push
-import io.element.android.libraries.architecture.createNode
 import io.element.android.features.login.changeserver.ChangeServerNode
 import io.element.android.features.login.root.LoginRootNode
+import io.element.android.libraries.architecture.animation.getDefaultTransitionHandler
+import io.element.android.libraries.architecture.createNode
 import kotlinx.parcelize.Parcelize
 
 class LoginFlowNode(
@@ -67,6 +68,8 @@ class LoginFlowNode(
         Children(
             navModel = backstack,
             modifier = modifier,
+            // Animate transition to change server screen
+            transitionHandler = getDefaultTransitionHandler(),
         )
     }
 }

features/preferences/src/main/kotlin/io/element/android/features/preferences/PreferencesFlowNode.kt

@@ -24,8 +24,9 @@ import com.bumble.appyx.core.modality.BuildContext
 import com.bumble.appyx.core.node.Node
 import com.bumble.appyx.core.node.ParentNode
 import com.bumble.appyx.navmodel.backstack.BackStack
-import io.element.android.libraries.architecture.createNode
 import io.element.android.features.preferences.root.PreferencesRootNode
+import io.element.android.libraries.architecture.animation.getDefaultTransitionHandler
+import io.element.android.libraries.architecture.createNode
 import kotlinx.parcelize.Parcelize
 
 class PreferencesFlowNode(
@@ -62,6 +63,7 @@ class PreferencesFlowNode(
         Children(
             navModel = backstack,
             modifier = modifier,
+            transitionHandler = getDefaultTransitionHandler()
         )
     }
 }

libraries/architecture/src/main/kotlin/io/element/android/libraries/architecture/animation/ScreenTransition.kt

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.architecture.animation
+
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
+import androidx.compose.runtime.Composable
+import com.bumble.appyx.core.navigation.transition.ModifierTransitionHandler
+import com.bumble.appyx.navmodel.backstack.BackStack
+import com.bumble.appyx.navmodel.backstack.transitionhandler.rememberBackstackSlider
+
+@Composable
+fun <NavTarget> getDefaultTransitionHandler(): ModifierTransitionHandler<NavTarget, BackStack.State> {
+    return rememberBackstackSlider(
+        transitionSpec = { spring(stiffness = Spring.StiffnessMediumLow) },
+    )
+}