Transitions
To use the transitions you should first import cafe.adriel.voyager:voyager-transitions (see Setup).
Voyager has built-in transitions! When initializing the Navigator you can override the default content and use, for example, the SlideTransition.
setContent {
Navigator(HomeScreen) { navigator ->
SlideTransition(navigator)
}
}

Available transitions

FadeTransition()
SlideTransition()
ScaleTransition()

Custom transitions

It's simple to add your own transitions: call ScreenTransition with a custom transitionModifier. Use the available params (screen, transition and event) to animate as needed.
@Composable
fun MyCustomTransition(
navigator: Navigator,
modifier: Modifier = Modifier,
content: ScreenTransitionContent
) {
ScreenTransition(
navigator = navigator,
modifier = modifier,
content = content,
transition = {
val (initialScale, targetScale) = when (navigator.lastEvent) {
StackEvent.Pop -> ExitScales
else -> EnterScales
}
scaleIn(initialScale) with scaleOut(targetScale)
}
)
}
setContent {
Navigator(HomeScreen) { navigator ->
MyCustomTransition(navigator) { screen ->
screen.Content()
}
}
}
Take a look at the source of the available transitions for working examples.
Copy link
On this page
Available transitions
Custom transitions