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.