Navigation Compose animation is always using the default transition

Question

I just migrated to navigation compose version 2.7.3 and am trying to implement the new animations. My issue is the animations don't work on some of the screens and is always the default fade animation.

I've tried to update both the NavHost animations and each individual composable for enterTransition, exitTransition, popEnterTransition, popExitTransition but its still the default. Is there something I'm missing?

Heidy

Add your code for better and fast solution. Need to see what you have defined for transitions and how you have used it – Jasmin

I have a zoom animation that appears by default in version 2.7.3. I have not found a way to turn it off at the moment, but it is normal in version 2.7.0. Since you did not provide more code, I am not sure whether lowering the version can solve the problem. your question, you might be able to try – Adar

Answer 1

It's really easy nowadays, you can override animations for single destination or you can override for whole NavHost:

 NavHost(
    navController = navController,
    startDestination = Screen.MainScreen.route,
    enterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Start, tween(700)) },
    exitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Start, tween(700)) },
    popEnterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.End, tween(700)) },
    popExitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.End, tween(700)) }
 ) {
    composable(Screen.MainScreen.route) {
        MainScreen(navController = navController)
    }

    composable(Screen.GameScreen.route) {
        GameScreen(navController = navController)
    }

Spaulding

I spent hours searching for transitions. But this saved me. Thanks.. – Lichfield

Answer 2

You can checkout this sample implementation(working proper for me)

First, define transitions like below:

private const val TIME_DURATION = 300

val enterTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition = {
    slideInHorizontally(
        initialOffsetX = { it },
        animationSpec = tween(durationMillis = TIME_DURATION, easing = LinearOutSlowInEasing)
    )
}

val exitTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition = {
    slideOutHorizontally(
        targetOffsetX = { -it / 3 },
        animationSpec = tween(durationMillis = TIME_DURATION, easing = LinearOutSlowInEasing)
    )
}

val popEnterTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition = {
    slideInHorizontally(
        initialOffsetX = { -it / 3 },
        animationSpec = tween(durationMillis = TIME_DURATION, easing = LinearOutSlowInEasing)
    )
}

val popExitTransition: AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition = {
    slideOutHorizontally(
        targetOffsetX = { it },
        animationSpec = tween(durationMillis = TIME_DURATION, easing = LinearOutSlowInEasing)
    )
}

@ExperimentalAnimationApi
fun NavGraphBuilder.slideComposable(
    route: String,
    arguments: List<NamedNavArgument> = emptyList(),
    content:
        @Composable()
        (AnimatedContentScope.(NavBackStackEntry) -> Unit)
) {
    composable(
        route,
        arguments = arguments,
        enterTransition = enterTransition,
        exitTransition = exitTransition,
        popEnterTransition = popEnterTransition,
        popExitTransition = popExitTransition,
        content = content
    )
}

And use slideComposable function instead of composable() inside NavGraph:

NavHost(
    navController,
    startDestination = "destination",
    modifier = Modifier) {
       navigation(startDestination = "startDestination", route = "route") {
          slideComposable("route) {
              /*Composable()*/
          }     
       }
}

Jasmin