AndroidJetpack/voyager/docs/transitions-api.md

Transitions

!!! success "" 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)
    }
}

!!! warning Have encounter Screen was used multiple times crash? Provide a uniqueScreenKey for your Screens

```kotlin hl_lines="3 4"
class ScreenFoo : Screen {
    
    override val key: ScreenKey
        get() = uniqueScreenKey

    @Composable
    override fun Content() {
        ...
    }
```

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()
        }
    }
}

!!! info "" Take a look at the source of the available transitions for working examples.

Per Screen transitions [Experimental]

If you want to define a Enter and Exit transition for a specific Screen, you have a lot of options to do starting from 1.1.0-beta01 Voyager have a new experimental API for this purpose.

class ExampleScaleScreen : Screen, ScreenTransition {
    override val key: ScreenKey
        get() = uniqueScreenKey

    @Composable
    override fun Content() {
        ...
    }
    
    override fun enter(): EnterTransition? = scaleIn()

    override fun exit(): ExitTransition? = scaleOut()
}

The API works with any ScreenTransition API, you just need to provide one and the Per Screen transition should.

setContent {
    Navigator(HomeScreen) { navigator ->
        SlideTransition(navigator)
    }
}

!!! warning "" CrossfadeTransition is not supported yet.