Does anyone have any good navigation transitions? ...

# compose

[Dovydas]

Does anyone have any good navigation transitions? I especially like the one in the Pixel Settings app, maybe there's some way to extract it from AOSP?

[MR3Y]

This was discussed before in the following thread, take a look at it:
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1724388218298629

[Dovydas]

Missed that, thanks

[Dovydas]

Although I'm having a weird issue. Instead of showing the last screen leaving during the transition, all animations show a gray screen.

Screen Recording 2025-06-10 at 01.49.21.mov

[MR3Y]

If you slow down the video, you'll notice that the last screen is fading out and then a gray screen appears, this doesn't look right though. If you can share some code that can help understanding the issue

[Dovydas]

Hmm, I'm not doing anything too special I don't think

NavHost(
                    navController = navController,
                    startDestination = AuthGraph.Auth,
                    enterTransition = { MotionDefaults.sharedXAxisEnter(density) },
                    exitTransition = { MotionDefaults.sharedXAxisExit(density) },
                    popEnterTransition = { MotionDefaults.sharedXAxisPopEnter(density) },
                    popExitTransition = { MotionDefaults.sharedXAxisPopExit(density) },
                ) {
                    authGraphDestination(
                        navController = navController,
                        onNavigateNext = { viewModel.refreshDestination() }
                    )

                    onboardingGraphDestination(
                        navController = navController,
                        onNavigateNext = { viewModel.refreshDestination() }
                    )

                    bluetoothGraphDestination(
                        navController = navController,
                        onNavigateNext = { viewModel.refreshDestination() }
                    )

                    deviceGraphDestination(
                        navController = navController,
                        onNavigateNext = { viewModel.refreshDestination() }
                    )

                }

fun NavGraphBuilder.authGraphDestination(navController: NavController, onNavigateNext: () -> Unit) {
    navigation<AuthGraph.Auth>(
        startDestination = Route.Login
    ) {
        composable<Route.Login> {
            LoginScreenRoot(
                onNavigateToPasswordReset = { navController.navigate(Route.PasswordReset) },
                onNavigateNext = onNavigateNext
            )
        }
        composable<Route.Signup> { SignupScreenRoot(
            onNavigateToEmailVerification = { navController.navigatePopUpTo(Route.EmailVerification) },
            onNavigateNext = onNavigateNext
        ) }
        composable<Route.PasswordReset> { PasswordResetScreenRoot() }
        composable<Route.EmailVerification> { EmailVerificationScreenRoot() }
    }
}

[MR3Y]

that viewModel.refreshDestination() looks suspicious

[Dovydas]

But that's only navigating between graphs. In the second code snippet, I'm navigation between the login and password reset screens through navController.navigate but the gray is still there.

Screen Recording 2025-06-10 at 12.54.22.mov