Transitions
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)
}
}
FadeTransition() | SlideTransition() |
![]() | ![]() |
ScaleTransition() |
![]() |
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()
}
}
}
Last modified 1yr ago