Hi Guys, Is there a way to choreograph enter anima...

# compose

[Archie]

Hi Guys, Is there a way to choreograph enter animation when transition from one screen and entering another?

I know that at the moment, we do have transition animation provide in the navigation library, but that animates the whole screen. (Ex. Slides Screen Off to the left while Sliding In Screen from the right)

I wonder if there is a way to coordinate animation so that other elements within the screen could be choreograph with entering and also exiting the screen.

Do you have any advice @Doris Liu?

[Stylianos Gakis]

Inside the screen you got access to AnimatedContentScope, you can use that to drive part of the animations inside that screen.
See Modier.animateEnterExit for example.

Other than that, if you can tell exactly what that animation you want to look like maybe there are alternatives. Maybe you need shared element apis.

[Archie]

Thank you very much.

Is there a way to coordinate the animateEnterExit(...) of each item. For example, only animate enter once, another item has completed its animation?

[Stylianos Gakis]

I think it'd be best if you actually show what you want to achieve to give a better idea of what you can use to make that happen.

[Archie]

I can’t really show a sample video of some sort. For a sample that I want to do, say I on my next screen, I have an AppBar with a back button, and two icons on the right. I would like to make it so that the AppBar slides from to the top, then the back button scales up, then the other icon scales up and then the last one scales up.

[Stylianos Gakis]

AnimatedContentScope gives you access to the underlying transition.
You can use that to drive individual animations https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]ParamNoReceiver&ss=androidx%2Fplatform%2Fframeworks%2Fsupport

More examples here https://developer.android.com/develop/ui/compose/animation/quick-guide#concurrent-animations how you can drive many things from one transition

[Doris Liu]

For sequential animations, the easiest way is to use duration based animations such as tween with a delay equivalent to another animation's duration + delay, so that the one starts after another.