How to remove default transitions in Jetpack Compose Navigation

Question

I'm using the following sippet of code to navigate from a composable to another one, but it has a default fade animation. How can I remove it? I tried using an empty anim resource but it doesn't work.

navHostController.navigate(
    "destination_route",
    navOptions {
        popUpTo("this_route") {
            inclusive = true
        }
        anim {
            enter = R.anim.empty_animation
            exit = R.anim.empty_animation
            popEnter = R.anim.empty_animation
            popExit = R.anim.empty_animation
        }
    }
)

R.anim.empty_animation:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Empty to disable animation-->
</set>

score 2 · Answer 1 · answered Dec 02 '21 at 09:05

As of right now, as EpicPandaForce said it is not possible, but that is because it is in the works!

Currently this functionality is served under accompanist, in the accompanist-navigation-animation artifact. You can read more about it here or in a more detailed blogpost here where they talk a bit about the future of it too.

The gist of it is that with that dependency (and without it when it eventually gets merged to the normal navigation-compose library) you will be able to write something like this:

composable(
  "profile/{id}",
  enterTransition = { _, _ ->
    // Whatever EnterTransition object you want, like:
    fadeIn(animationSpec = tween(2000))
  }
) { // Content }

V Mircan · Answer 2 · 2023-09-01T12:19:43.610

As of, 2023, there still seems to be no way to remove the default crossfade animation. However, you could get very close by using something like this:

val noEnterTransition : AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition = {
    fadeIn(
        animationSpec = tween(durationMillis = 300),
        initialAlpha = 0.99f
    )
}

val noExitTransition : AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition = {
    fadeOut(
        animationSpec = tween(durationMillis = 300),
        targetAlpha = 0.99f
    )
}

This custom transition fades out from 100% opacity to 99% over the course of the animation duration (which will be imperceptible to the naked eye).

The only thing to watch out for is that after the durationMillis of the animation passes, the screen will disappear altogether. So if you need it to stay visible for longer (if you have a long enter animation that replaces the current composable), you will need to increase the duration of the animation. So choose the minimum duration that covers your needs (since we want to avoid unnecessary interpolation of the opacity).

Hope this helps!

@lenooh Apologies, `NavAnimationScope` is a type alias I made for the rather long `AnimatedContentTransitionScope`. Thanks for pointing out my oversight, I've corrected the answer. — V Mircan, Sep 01 '23 at 12:18
Thanks for the explanation! However, I think since navigation 2.7 you can use for example `enterTransition = { EnterTransition.None }` and `exitTransition = { ExitTransition.None }` to disable the default fade animation. — lenooh, Sep 01 '23 at 22:08

score 0 · Answer 3 · answered Dec 02 '21 at 04:03

Currently, there is no way to configure the animations in the NavHost offered by Navigation-Compose's current version (2.4.0-beta02).

@Composable
public fun NavHost(
    navController: NavHostController,
    graph: NavGraph,
    modifier: Modifier = Modifier
) {
    val backStackEntry = visibleTransitionsInProgress.lastOrNull() ?: visibleBackStack.lastOrNull()

    var initialCrossfade by remember { mutableStateOf(true) }
    if (backStackEntry != null) {
        // while in the scope of the composable, we provide the navBackStackEntry as the
        // ViewModelStoreOwner and LifecycleOwner
        Crossfade(backStackEntry.id, modifier) { //// <<----- this

As Crossfade is not configurable, the transition cannot be changed.

To change the animation, you have to abandon using the NavHost provided by Navigation-Compose.

score 0 · Answer 4 · answered Jun 29 '23 at 08:02

You could achieve that if you have used the Accompanist library. However, starting with version 2.7.0-alpha01 of Navigation, it said that:

Now that AnimatedContent is stable, we were able to move the code from Accompanist Navigation Animation back into Navigation Compose itself.

This means all of the support for setting custom transitions that existed in AnimatedNavHost is directly supported in NavHost.

This means that you'll be able to achieve that using the regular NavHost which now has new 4 arguments, the enterTransition, exitTransition, popEnterTransition and popExitTransition.

How to remove default transitions in Jetpack Compose Navigation

4 Answers4