Quantcast
Channel: Active questions tagged navigation - Stack Overflow
Viewing all articles
Browse latest Browse all 9839

How to properly add screen transition animations in jetpack compose?

$
0
0

I want to add transition animations while navigating from one screen to another in my app.I have three screens in my app. When i navigate from the first screen to the second screen and also navigates back from it , then the animation is working fine. But when I try to navigate from the second screen to the third screen and then navigates back, the animation gets jumbled up.

composable(                route = Screens.SEARCH_DETAILS_SCREEN.name +"/{name}" +"/{type}",                arguments = listOf(                    navArgument(name = "name") { type = NavType.StringType },                    navArgument(name = "type") { type = NavType.StringType }                ),                enterTransition = {                    slideInHorizontally(                        initialOffsetX = {400},                        animationSpec = tween(                            600,                            easing = FastOutSlowInEasing                        )                    )+ fadeIn(animationSpec = tween(600))                },                popExitTransition = {                    slideOutHorizontally(                        targetOffsetX = {400},                        animationSpec = tween(                            600,                            easing = FastOutSlowInEasing                        )                    )+ fadeOut(animationSpec = tween(600))                }            ) 

I've used this for enter and popExit transition in the second and third screen composables. I believe the conflict is because of when i try to navigate back from the third screen, the enter transition of the second screen and the popExit of the third screen gets merged. I want to know the correct way to do it and how can i make it look good.


Viewing all articles
Browse latest Browse all 9839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>