What is the correct way to animate the visibilty o...

# compose

[Mini]

What is the correct way to animate the visibilty of a composable that does not exist when it is not supposed to be displayed? E.g. listOf(1, 2, 3).forEach { Text(it.toString()) }
I can't use AnimatedVisibility here because the compose element is not always rendered, so when it is removed from the list it will automatically disappear?

[Stylianos Gakis]

Isn’t that the entire premise of animating things in? That they do not exist sometimes, and when they exist they animate in?

[Mini]

Sure but I don't see how to do it?
Most examples with AnimatedVisibility is that you have a section of expandable text or whatever, that is sometimes visible, sometimes not, but it is always composed

But when the content is derived from some state that may or may not exist that no longer works

[Stylianos Gakis]

Why can't that state be used as the parameter of your AnimatedVisibility on whether to show or not?
You also must always keep it in composition, otherwise as soon as the state turns to false you wouldn't get an animation out, but it would disappear immediately

[Mini]

that's my point, if I remove the last item from the list, which the user might to to dismiss or similar, then the item will disappear

[Stylianos Gakis]

Ngl, I'm having a hard time understanding what it is exactly that you are saying here.
Some screenshots or a more thorough explanation might help

[Mini]

Haha, sorry my explanation is crap

Let's say I have a list of items, which the users can add/remove from

val list = remember { mutableStateListOf(1,2,3) }

Column {
list.forEach {
Text(it.toString(), modifier = Modifier.clickable(onClick = { list.remove(it) }))
}
Button(onClick = {list.add(Random.nextInt())}) { Text("Add an item") }

[Mini]

If I would like the items to fade out when they are removed, I can't use AnimatedVisibility, because the item will immediately be removed from composition, like you mentioned

[Stylianos Gakis]

Alright thank you, I think I understand now.
Might be this issue https://issuetracker.google.com/issues/150812265 where they mention: "Additions/removals animations: In progress"
Aka that part is not really part of the lazy column APIs.

Now for a non-lazy approach, is this list a list of an indefinite amount of items? Or some specific ones coming in and out of view?

[Mini]

Not using LazyColumn for this

Technically indefinite amount however user is not very likely to add/remove more than 3-4 items

[Stylianos Gakis]

I am not aware of a more smart solution other than hacking something together where you keep a local state that contains a copy of the list as it is along with a isShown boolean for each item or something like that. Then when an item is removed from your real state, turn that boolean off on the copied over list which will live inside your composable. Then when a new item enters the original list, reflect that in the copy, and set isShown to true, which should also animate in.

Or something like that, there might be solutions online that already do something like this if you search for it.

[Mini]

Most solutions I've found do what you've suggested above, and that certainly works, I was just hoping there was a better way as it sort of feels like duplicating state. Worried what might happen if the animation completes, but removing from list breaks, then there is a consistency between UI and state, which sort of breaks the declarative nature of compose which is sad 😞 😅

Thanks for the input though! I guess I might just have to go for a solution like that