What is the recommended way to handle multiple ani...

# compose

[Luke]

What is the recommended way to handle multiple animations with some running at the same time, and some running automatically when the first set of animations is finished?
I have to animate an onboarding screen with two panels (A and B) with animationn roughly as follows:
1. Panel A slides from the left and panel B slides from the right
2. The content of panel B fades in (1 image and one text centered vertically)
3. The text of panel B fades out. The image goes to the top of the panel and stays visible
4. A new content fades in in B, with the same image at the same place at the top of the panel
The only thing I can see for now is playing with delays in LauchedEffect and updating a target state for the animations but that doesn't seem clean

[rook]

Using a TargetBasedAnimation, you can calculate whether the animation is over in a LaunchedEffect and then call-back to a completion lambda with something like this:

val startTime = withFrameNanos { it }
do {
    val playTime = withFrameNanos { it } - startTime

    animatedValue.value = animation.getValueFromNanos(playTime)

    if (animation.isFinishedFromNanos(playTime)) {
        onCompleted(runningState)
        break
    }
} while (true)

[Doris Liu]

Can these different steps be expressed as different Transition target states? If so, you could consider creating a MutableTransitionState and using it in updateTransition. This way you could update `MutableTransitionState`'s targetState whenever the transition finishes.

val mutableTransitionState = remember { MutableTransitionState(initialState) }
    updateTransition(mutableTransitionState, label = "...")
    LaunchedEffect(mutableTransitionState) {
        snapshotFlow {
            mutableTransitionState.currentState == mutableTransitionState.targetState
        }.collect { finished ->
            if (finished) {
                // change target to the next transition state
                mutableTransitionState.targetState = nextState
            }
        }
    }

[rook]

Yes, in a project I work on, we have a set of transitions that are triggered in order this way

[Luke]

That's interesting. Thanks for both feedbacks