I want to create sliding left or right animation when clicking on a page in my bottom navigation.
However, how do I set it so that if user is moving from right to left, the content should feel like its being swiped to the right.
I have added some animation so if the user is moving from left to right, the content feels like its being swiped to left. But it does not work if user is moving from right to left
NavHost(
navController = navController,
startDestination = BottomNavItem.Home.route,
enterTransition = {
slideIntoContainer(
AnimatedContentTransitionScope.SlideDirection.Left,
animationSpec = tween(150))
},
exitTransition = {
slideOutOfContainer(
AnimatedContentTransitionScope.SlideDirection.Left,
animationSpec = tween(150)
)
},
popEnterTransition = {
slideIntoContainer(
AnimatedContentTransitionScope.SlideDirection.Right,
animationSpec = tween(150))
},
popExitTransition = {
slideOutOfContainer(
AnimatedContentTransitionScope.SlideDirection.Right,
animationSpec = tween(150))
}
) {
composable(
route = BottomNavItem.Home.route,
){
HomePageScreen()
}
composable(
route = BottomNavItem.ChatList.route
){
ChatListPageScreen(navController)
}
composable(
route = BottomNavItem.Profile.route
){
ProfilePageScreen()
}
composable(route = NavItem.Chat.route){
ChatPageScreen()
}
}
The first part is me moving from left to right, which is working fine. But when I move right to left, the animation should be the opposite im assuming
enter image description here