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?

Add your code for better and fast solution. Need to see what you have defined for transitions and how you have used it — Megh Lath
– Megh Lath, Commented Sep 25, 2023 at 4:34
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 — midFang
– midFang, Commented Sep 26, 2023 at 7:24

Viktor Yakunin · Accepted Answer · 2024-02-18 22:05:05Z

44

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)
    }

answered Feb 18, 2024 at 22:05

Viktor Yakunin

3,3963 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ummer Siddique Over a year ago

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

Megh Lath · Accepted Answer · 2023-09-25 05:00:52Z

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()*/
          }     
       }
}

Collectives™ on Stack Overflow

Navigation Compose animation is always using the default transition

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related