is there a way to animate/create transition for `C...

# compose

[Archie]

is there a way to animate/create transition for Composable s getting "disposed".

When changing state in compose it is usually done this way:

Surface(color = selectorExpandedColor, elevation = 3.dp) {
        when (currentSelector) {
            InputSelector.EMOJI -> EmojiSelector(onTextAdded, focusRequester)
            <http://InputSelector.DM|InputSelector.DM> -> NotAvailablePopup(onCloseRequested)
            InputSelector.PICTURE -> FunctionalityNotAvailablePanel()
            InputSelector.MAP -> FunctionalityNotAvailablePanel()
            InputSelector.PHONE -> FunctionalityNotAvailablePanel()
            else -> { throw NotImplementedError() }
        }
    }

(Note: Code above is taken from JetChat)

But doing so, creates a jarring experience where contents just pops-out and pops-in in an instant. Is it possible to trigger/create transition or animation when changing states (animate composable out and then animate composable coming in)?

Is there any guide for this out there?

[jaqxues]

you could wrap it inside an animation

[jaqxues]

an example of this would be Crossfade

[jaqxues]

Crossfade(current = currentTab) {
                when (it) {
                    Fragments.HOME_FRAG -> HomeScreen()
                    Fragments.ABOUT_US_FRAG -> AboutUsScreen()
                }
            }

[Adam Powell]

you might find https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#AnimatedVisibility(kotlin.Boolean,%20androidx.compose.ui.Modifier,%20androidx.compose.animation.EnterTransition,%20androidx.compose.animation.ExitTransition,%20kotlin.Boolean,%20kotlin.Function0) helpful

[Archie]

Wow Im really missing out on these documentations! Thank you very much!

[Adam Powell]

The docs are very much WIP 🙂 If you can tell us what you searched for or how you tried to find this sort of thing that didn't lead to what you were looking for, we can give that info to the docs team for any later design work on the site

[Sergey Y.]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1599259370042000

@Adam Powell Hi. Recently I was searching how to animate translations of views in Compose. I wanted to animate view translation by x-axis in range from X to X1. In general, I achieved the desired result but I think the implementation was far from ideal.
I wanted to see more examples of animation API usage.
I am having difficulty with understanding the analogy of View.animate().translateX(...) in Compose. Also, I was wondering how to use the AnimatedFloat or transitionDefinition with dynamic values for states, etc.
Thanks.

[Adam Powell]

the strange impedance mismatches you're running into are why I would like to make two specific API changes to some of the things you're using:
1. animate should return a State<T> - that's what it's using internally anyway and you shouldn't need to bounce it into another MutableState<T> via composition.
2. Modifier.offset should accept a lambda block that returns the offset when needed, so you can freely use State<T> in expressions and have the observation pushed to layout-positioning time rather than moving back into composition, or forcing the value into an additional State<T> holder.

[Sergey Y.]

> animate should return a State<T>
:thinking_face:

[Sergey Y.]

Oh...