What is the proper way to use different transitions in voyager?

[akardas16]

What is the proper way to use different transitions in voyager? Below code didn't work for me.

Navigator(HomeScreen) { navigator ->
               if (navigator.lastItem.key == DetailScreen(name = "").key) {
                      FadeTransition(navigator)
                } else {
                        SlideTransitions(navigator)
                    }
                }

[Syer10]

I've found the best way is to use https://voyager.adriel.cafe/navigation/nested-navigation

[akardas16]

I've found the best way is to use https://voyager.adriel.cafe/navigation/nested-navigation

If that is the case, It is not possible to use different transitions in same Navigator. Am I right?

[Ric-AB]

If that is the case, It is not possible to use different transitions in same Navigator. Am I right?

This might help: https://www.droidcon.com/2022/08/02/painless-typesafe-jetpack-compose-navigation-with-voyager/ You can skip to around 21:36

[Syer10]

@kihaki do you have a library/repo with this code? The way you did animations and results look great, and I would love to use it

[Pixelaters]

Watched the video and loved it, would love to be able to see the repo and play around with it as well

[DevSrSouza]

The source was published here https://github.com/kihaki/droidcon_2022_voyager

Thanks @kihaki

[Velord]

@Composable
fun Transition(
    navigator: Navigator,
    modifier: Modifier = Modifier,
    content: ScreenTransitionContent = { it.Content() }
) {
    val transition: AnimatedContentTransitionScope<Screen>.() -> ContentTransform = {
        when {
            navigator.lastEvent == StackEvent.Pop && navigator.lastItem == MyScreen -> {
                scaleIn(
                    initialScale = 0.1f,
                ) togetherWith scaleOut(
                    targetScale = 0.2f
                )
            }
            else ->  // slide 
    }
    ScreenTransition(
        navigator = navigator,
        transition = transition,
        modifier = modifier,
        content = content,
    )
}

Same struggle. You can't detect who invokes navigation when you go back. Problem is when navigator.lastEvent is fired navigator.lastItem returns not "last" but a "current" screen. Need to add to API of navigator.lastEvent property with name like "invoker" which tells from where it was called or add to Navigator that property.

[Kuglll]

+1 it would be really nice if we could define transitions per screen and not per navigator.

[DevSrSouza]

AnimatedContentTransitionScope has a initialState and targetState.

[kaiyrzhanDE]

Has anyone found a solution?

[DevSrSouza]

We have introduce a new experimental api, please check out, validate and give feedbacks. https://voyager.adriel.cafe/transitions-api/#per-screen-transitions-experimental