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.
1
setContent {
2
Navigator(HomeScreen) { navigator ->
3
SlideTransition(navigator)
4
}
5
}
Copied!

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.
1
@Composable
2
fun MyCustomTransition(
3
navigator: Navigator,
4
modifier: Modifier = Modifier,
5
content: ScreenTransitionContent
6
) {
7
ScreenTransition(
8
navigator = navigator,
9
modifier = modifier,
10
content = content,
11
transition = {
12
val (initialScale, targetScale) = when (navigator.lastEvent) {
13
StackEvent.Pop -> ExitScales
14
else -> EnterScales
15
}
16
17
scaleIn(initialScale) with scaleOut(targetScale)
18
}
19
)
20
}
21
22
setContent {
23
Navigator(HomeScreen) { navigator ->
24
MyCustomTransition(navigator) { screen ->
25
screen.Content()
26
}
27
}
28
}
Copied!
Take a look at the source of the available transitions for working examples.
Last modified 1mo ago