Animating between Composables in Navigation with Compose

Question

I have started trying out Navigation for compose.

I created my 2 Composables and everything is working fine.

But what I'm missing is Animations (or Transitions) between the pages. I didn't find any resources pointing out how to do it in Compose.

I know all animations are based on states in Compose, but the only thing I know is the Navigation Back Stack.

Answer 1

You can use the composable I made to show enter animation (configure preferable effects in "enter" and "exit" parameters)

fun EnterAnimation(content: @Composable () -> Unit) {
    AnimatedVisibility(
        visible = true,
        enter = slideInVertically(
            initialOffsetY = { -40 }
        ) + expandVertically(
            expandFrom = Alignment.Top
        ) + fadeIn(initialAlpha = 0.3f),
        exit = slideOutVertically() + shrinkVertically() + fadeOut(),
        content = content,
        initiallyVisible = false
    )
}

You can use it like this:

NavHost(
    navController = navController,
    startDestination = "dest1"
) {
    composable("dest1") {
        EnterAnimation {
            FirstScreen(navController)
        }
    }
    composable("dest2") {
        EnterAnimation {
            SecondScreen(navController)
        }
    }
}

Answer 2

In alpha-09 this is not supported. :(

Please, star this issue: https://issuetracker.google.com/issues/172112072