Transitions
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!
Last modified 1mo ago
Copy link