Hello! :wave: What’s the approach to animate the ...

# compose

[Nacho Ruiz Martin]

Hello! 👋

What’s the approach to animate the enter and exit of composables added in a forEach?
Simplified version of the parent Composable looks like this:

val items: MutableList<...> = ...
Column() {
    items.forEach { item ->
        ChildComposable()
    }
}

AnimatedVisibility applied in parent doesn’t work because the parent is always there. Applying it to the children works on enter but not en “exit” because when the item disappears from the list there’s no longer a child Composable to “exit”.

Thanks! 🙇

[Albert Chang]

What kind of animation do you want?
You can start with using Modifier.animateContentSize() on the parent.

[Nacho Ruiz Martin]

Each item has to combine fadeIn and slideInVertically to enter and fadeOut and slideOutVertically whenever it’s added or removed from/to the list.

[Chris Sinco [G]]

Have you tried the animateEnterExit modifier on the child Composables?

[Chris Sinco [G]]

There are item animations planned for LazyColumn (not sure that helps here), but @Doris Liu may have other ideas as well

[Nacho Ruiz Martin]

Yeah, I tried with animateEnterExit but if I didn't missunderstood it, it's only to modify the enter/exit animation of the children when the parent's visibility is modified, which is not happening here.

I found this and it looks promising but a bit hacky. Also this but I suspect that it'll only work with LazyLists.

I will test those solutions, anyway 😄.

[Doris Liu]

Yea, AnimatedVisibilityLazyColumnDemo that you linked here would be helpful for your item removal use case. The main idea there is that the composable for the deleted items need to be retained until they finishes exiting.

We are exploring more straightforward ways to achieve this type item addition/removal in LazyColumn. @Andrey Kulikov might be able to share some insights.

[Andrey Kulikov]

yeah, nothing to share for now. AnimatedVisibilityLazyColumnDemo is the closest you can get for additions/removals for now. and for reorderings we have Modifier.animateItemPlacement() in Lazy lists

[Nacho Ruiz Martin]

Great, thanks a lot 🤗