Animation Component with Compose
Tags: android, kotlin, tutorial, programming
Published: 2023-08-04 13:11:38


![firebase icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi4pq5b3ivi8zfh0ldcr.gif)

Hello, amazing person of the internet! Hope you're doing well.

As users become increasingly accustomed to fluid animations and intuitive interactions, incorporating animation into your app has become a pivotal element for success.

&nbsp;

## Animate*AsState

This API should be used when animating State changes. Let’s see how we can do this in practice.

You just need to declare your variable as animate*AsState. In my case, I am going to animate a color:

I am simply setting a color with the color variable, and the backgroundColor that we are going to use is declared using animateColorAsState, which takes the color as a parameter.

Now, let’s create two buttons, and upon clicking them, we will set another value to the color variable:

{% embed https://gist.github.com/MariaLuiza-CS/6b887af99e6d0fb3b9bde3dc1fc62644 %}

You are going to see something like that:

![gif of a phone showing the color change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6752atixi9qw9egupyt3.gif)

&nbsp;

## Animating Content Size

Expanding the content of a component is not a surprise to us, but you can make it even prettier by adding some animation.

You just need to add animateContentSize to the modifier of your card

Here is my card without any animation. It simply expands when you click on it:

{% embed https://gist.github.com/MariaLuiza-CS/cb0b38ab0072fb5daed25c1961d7625b %}

![gif of a phone showing a card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6c3yfkl56yknmcq62atz.gif)

To animate, I am going to call the animateContentSize on the modifier's column:

{% embed https://gist.github.com/MariaLuiza-CS/f2398671671a5c0a996307f460349904 %}

![gif of a phone showing a card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjctv51svpkbjxn7weme.gif)

&nbsp;

## Animating Visibility

I love how it’s easy to create animated views with Jetpack Compose. Have you ever wondered how to animate elements when scrolling through a list? Let’s do this.

First things first, I am going to create a lazy column list. If you don’t know how to develop this, just check out [my article about list and grid layouts](https://dev.to/marialuizacs/grid-and-lists-in-compose-4ki2):

{% embed https://gist.github.com/MariaLuiza-CS/10bdc0d565de8c3763d1cddfd01365ba %}

To create animated visibility, we can utilize The AnimatedVisibility method. This method triggers the animation component each time the associated Boolean value changes.

I’m going to animate two components: a floating action bar and a text. Let’s create a function responsible for animating each of these views:

{% embed https://gist.github.com/MariaLuiza-CS/a46f330059135b083c75a2c23bc82c18 %}

{% embed https://gist.github.com/MariaLuiza-CS/a2fa8cbf03c62460e7bf32a54ce88f4d %}

> visible: Set this to determine if the animation should occur or not.
exit: Use it to control how the animation occurs when the component is disappearing.
enter: Use it to control how the animation occurs when the component is appearing.
Now, let’s call those functions in our main activity using the scaffold methods.

First, the floating action button :

{% embed https://gist.github.com/MariaLuiza-CS/a8357638e1b4c9498d2a638e8f5576c0 %} 

Now, let’s refer to the animated text in the content parameter:

{% embed https://gist.github.com/MariaLuiza-CS/a9aec6ed8f3dae14b5b55fc932f5daa5 %}

Last but not least, let’s call the list:

{% embed https://gist.github.com/MariaLuiza-CS/e178001730c030a6ba97a0e173705c49 %}

![gif of a phone showing a card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ne5x9vf7fo46loefiw9.gif)

&nbsp;

##Conclusion

There are many other animations you can create with Compose.

If you all are interested, I can demonstrate and provide those customization.

integrating animation directly into Compose, it simplifies the process and optimizes performance. Embracing this technology opens up a world of creative possibilities and enhances the user experience, ensuring a promising future for Android UI development.

All the code and exemple it is [on this repository.](https://github.com/MariaLuiza-CS/AnimationComponentCompose)

Happy coding ❤

---

Please let me know what you think in the comments…

Connect with me 👇

[Linkedin](https://www.linkedin.com/in/marialuiza-cs/)

[GitHub](https://github.com/MariaLuiza-CS)

[Instagram](https://www.instagram.com/luiza.android)

[Medium](https://medium.com/@MariaLuiza-CS)

![git of a woman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w28uoj8lmnrucilvvs61.gif)