A Composable Journey: Jetpack Compose Animations | by Alejandro Zurcher | Jun, 2023
Let’s animate the content visibility
The first thing we’ll do is add some visibility updates to our content, ensuring that it doesn’t just pop up in the UI without notice. Thankfully, achieving this in Compose is very straightforward.
Let’s first extract the content that is displayed on top of our Crypto Card Background:
With this extraction we can easily see how the background is in its own composable and the content on top of it now:
Now that we have tidied up our implementation, let’s explore how to animate the visibility of our content. Jetpack Compose offers us the AnimatedVisibility Composable, which allows us to wrap around the element we want to animate and customize its visibility according to our needs.
Let’s do just that! Following the diagram at the top of the page, our desired animation for this specific scenario involves animating the appearance and disappearance of the content within our layout. It fits perfectly with what we want to accomplish.
But nothing happens…
The concept behind using AnimatedVisibility is that an update is triggered by something. It could be a click or an event within our app. However, in this particular case, we want the animation to occur only once when the UI is displayed. To achieve this, we need to update the visible mutable boolean using a LaunchEffect, which will delay this action for a brief 300 ms:
So the content appears with an animation that is triggered 300 ms after loading the screen. That’s great! However, we want it to appear from the bottom and have a fade-in effect. To accomplish this, we can utilize the enter parameter of the AnimatedVisibility composable, which enables us to create any desired animation for the appearance:
