Transitions

Default transitions

You can specify the default appear and disappear transitions for every Screen in a Navigator.

Vortex comes bundled with a set of a few transitions you can use for your apps.
You can check them out here.

In this example we will be using FadeTransition.

@Composable
fun App(){
    Navigator(HomeScreen) { navigator ->
        CurrentScreen(
            navigator = navigator,
            defaultOnScreenAppearTransition = FadeTransition,
            defaultOnScreenDisappearTransition = FadeTransition
        )
    }
}

This will make it so that the default fade transition will play everytime a new screen is pushed or popped from the navigator.

Per screen transitions

You can make a screen appear with a specific transition:

@Composable
fun App(){
    Navigator(HomeScreen)
}

data object HomeScreen : Screen {

    @Composable
    override fun Content() {
        val navigator = LocalNavigator.currentOrThrow

        Button(
            onClick = {
                navigator.push(
                    DetailsScreen(
                        id = 1,
                        onAppearTransition = SlideTransition.Horizontal.Appear
                    )
                )
            }
        ) {
            Text(text = "Show details")
        }
    }
}

data class DetailsScreen(val id: Long, override val onAppearTransition: ScreenTransition?) :
    Screen {

    @Composable
    override fun Content() {
        val navigator = LocalNavigator.currentOrThrow

        Button(
            onClick = {
                navigator.pop()
            }
        ) {
            Text(text = "Go back")
        }
    }
}

Custom transitions

You can create your own transitions by implementing the ScreenTransition interface.

You can find source code for a working example here.