Animating LazyList items in Jetpack Compose
LazyColumn and LazyRow items can finally be animated when being added to or removed from the list
LazyColumn and LazyRow are probably one of the most used components of Compose. Despite this, there has been a long standing issue of animating items of lists which was first reported back in 2020 (yes, 4 years ago). While the new update provides a way to enable fade in and fade out transitions only, it is a step in the right direction.
The old solution
For some time now there has been a way to animate items using the Modify.animateItemPlacement() modifier. The problem with this was that it animates the placement of the items only. In practice this means when the list is reordered or an item is inserted / removed from the middle of the existing list, the entire list moves around. However, if an item is added or removed from the end of the list, there’s no animation at all. Generally speaking, the appearance and disappearance animations are missing completely.
Steps in the right direction
Starting with version 1.7.0-alpha06 of the Compose Foundation library, the items can be animated not just for placement (which usually means mostly reordering) but also for appearance and disappearance. At the time of writing, these new animations only work with the fade in and fade out transitions, but the concept lays the foundation of future updates where the transition could be anything (think about sliding in and out for example).
To achieve this, a simple update is needed in the code if you’ve already used the (now) deprecated modifier animateItemPlacement(...): replace with animateItem(...). If you haven’t used any animations yet, you just need to add the new modifier to the topmost composable of your list items. This automatically applies the fade in and fade out effects. You can customize the transitions’ specs with the fadeIn and fadeOut parameters, so if you need longer / shorter animations or simply want to disable them (that’s what the deprecated old modifier does internally now), you can do that, too.
It’s also worth noting that the animations are only played at the time of insertion / removal, no need to worry about them when scrolling the list.
Note that you need to specify the keys for your items in the
LazyList, otherwise the animations won’t work properly as the list uses the indices as keys by default.
Here’s a sample usage:
The sample project is available at https://github.com/gregkorossy/Sample-LazyListAnimations
There’s still a long road until it becomes a fully featured item animator that resembles the one in the old RecyclerView world: support for other animation types, adding the missing LazyGrid and LazyStaggeredGrid implementations are still pending issues that should be addressed in the near future, but this is a long-awaited and welcomed addition to the LazyList world of Jetpack Compose.
