Repository: google/accompanist

Issue #1160: [Navigation Animation] Control composable route zIndex
Created: 2022-05-11T16:30:44Z
I'm trying to implement modal transition: new screen slides in from bottom and slides out back.
Expected behaviour:

Slide in animation works fine, but slide out animation doesn't - because appearing view seems to have higher zIndex, no matter wether it is pushing or popping.
Actual behaviour:

I've tried specifying it with a modifier, it didn't worked out. In my case I need zIndex to be equal to backstack index, in other words during pop disappearing view should have higher zIndex, than the appearing one.
object Destinations {
    const val Login = "login"
    const val Home = "home"
}

@Composable
fun NavTestScreen(
) {
    val navController = rememberAnimatedNavController()
    AnimatedNavHost(navController = navController,
        startDestination = Destinations.Login,
        modifier = Modifier.fillMaxSize()) {
        composable(
            Destinations.Login,
            enterTransition = { NavigationTransition.IdentityEnter },
            exitTransition = { NavigationTransition.IdentityExit },
        ) {
            Button(onClick = {
                navController.navigate(Destinations.Home)
            }) {
                Text(text = "Next")
            }
        }
        composable(
            route = Destinations.Home,
            enterTransition = { NavigationTransition.slideInBottomAnimation },
            exitTransition = { NavigationTransition.slideOutBottomAnimation },
        ) {
            Button(
                onClick = {
                    navController.popBackStack()
                },
                colors = ButtonDefaults.buttonColors(backgroundColor = Color.Yellow),
                modifier = Modifier.zIndex(100f)
            ) {
                Text(text = "label")
            }
        }
    }
}

object NavigationTransition {
    private val animation: FiniteAnimationSpec<IntOffset> = tween(
        easing = LinearOutSlowInEasing,
        durationMillis = 2000,
    )

    val IdentityEnter = slideInVertically(
        initialOffsetY = {
            -1 //fix for https://github.com/google/accompanist/issues/1159
        },
        animationSpec = animation
    )

    val IdentityExit = slideOutVertically(
        targetOffsetY = {
            -1 //fix for https://github.com/google/accompanist/issues/1159
        },
        animationSpec = animation
    )

    var slideInBottomAnimation =
        slideInVertically(initialOffsetY = { fullHeight -> fullHeight }, animationSpec = animation)

    var slideOutBottomAnimation =
        slideOutVertically(targetOffsetY = { fullHeight -> fullHeight }, animationSpec = animation)
}

Duplicate issue #1358: [Navigation Animation] 
Created: 2022-09-29T02:49:40Z
Use SimpleAnimatedNavHost to add two pages and set a jump animation similar to ios page exitTransition : slideOutHorizontally( targetOffsetX = { fullWidth -> (-(fullWidth * 0.1)).toInt() }, animationSpec = tween(animationDuration) ) popEnterTransition: slideInHorizontally( initialOffsetX = { fullWidth -> (-(fullWidth * 0.1)).toInt() }, animationSpec = tween(animationDuration) ) 2. Route to the second page, perform pop in the second page, then you will see that the first page covers the second page to perform the entry animation, and the second page will perform the exit animation at the bottom.
video url:
https://issuetracker.google.com/action/issues/246664224/attachments/38881411?download=true

Closing comment (2022-10-18T20:03:25Z): This has to do with z-order which is a dup of #1160