### [Animations in Compose](http://android.devsite.corp.google.com/develop/ui/compose/animation/quick-guide)

Animations are essential in a modern mobile app in order to realize a smooth and understandable user experience.  
[Quick guide](http://android.devsite.corp.google.com/develop/ui/compose/animation/quick-guide)

## Animation modifiers and composables

[![](http://android.devsite.corp.google.com/static/develop/ui/compose/images/animations/animated_visibility_column.gif)](http://android.devsite.corp.google.com/develop/ui/compose/animation/composables-modifiers#animatedvisibility)  

### [Animate appearance and disappearance](http://android.devsite.corp.google.com/develop/ui/compose/animation/composables-modifiers#animatedvisibility)

The `AnimatedVisibility` composable allows you to hide or show content easily.  
[Learn more](http://android.devsite.corp.google.com/develop/ui/compose/animation/composables-modifiers#animatedvisibility)  
[![](http://android.devsite.corp.google.com/static/develop/ui/compose/images/animations/animated_content_size.gif)](http://android.devsite.corp.google.com/develop/ui/compose/animation/composables-modifiers#animateContentSize)  

### [Animate content size changes](http://android.devsite.corp.google.com/develop/ui/compose/animation/composables-modifiers#animateContentSize)

Use `animateContentSize()` to achieve automatic size change animations.  
[Learn more](http://android.devsite.corp.google.com/develop/ui/compose/animation/composables-modifiers#animateContentSize)  
[![](http://android.devsite.corp.google.com/static/develop/ui/compose/images/animations/animated_content_slower.gif)](http://android.devsite.corp.google.com/develop/ui/compose/animation/composables-modifiers#animatedcontent)  

### [Animate between different composables](http://android.devsite.corp.google.com/develop/ui/compose/animation/composables-modifiers#animatedcontent)

Use `AnimatedContent` to animate between composables that have different content.  
[Learn more](http://android.devsite.corp.google.com/develop/ui/compose/animation/composables-modifiers#animatedcontent)

## Value-based animations

[![](http://android.devsite.corp.google.com/static/develop/ui/compose/images/animations/animated_padding.gif)](http://android.devsite.corp.google.com/develop/ui/compose/animation/value-based#animate-as-state)  

### [Animate a single value](http://android.devsite.corp.google.com/develop/ui/compose/animation/value-based#animate-as-state)

Use `animate*AsState` functions to animate an individual property, such as opacity.  
[Learn more](http://android.devsite.corp.google.com/develop/ui/compose/animation/value-based#animate-as-state)  
[![](http://android.devsite.corp.google.com/static/develop/ui/compose/images/animations/multiple_properties.gif)](http://android.devsite.corp.google.com/develop/ui/compose/animation/quick-guide#concurrent-animations)  

### [Animate multiple values together](http://android.devsite.corp.google.com/develop/ui/compose/animation/quick-guide#concurrent-animations)

Use `Transition` to animate multiple values at once.  
[Learn more](http://android.devsite.corp.google.com/develop/ui/compose/animation/quick-guide#concurrent-animations)  
[![](http://android.devsite.corp.google.com/static/develop/ui/compose/images/animations/animated_forever.gif)](http://android.devsite.corp.google.com/develop/ui/compose/animation/value-based#rememberinfinitetransition)  

### [Animate properties indefinitely](http://android.devsite.corp.google.com/develop/ui/compose/animation/value-based#rememberinfinitetransition)

Use `InfiniteTransition` to animate properties continuously.  
[Learn more](http://android.devsite.corp.google.com/develop/ui/compose/animation/value-based#rememberinfinitetransition) [![](http://android.devsite.corp.google.com/static/images/picto-icons/interoperable.svg)](http://android.devsite.corp.google.com/develop/ui/compose/animation/customize)  

### [Customize your animations](http://android.devsite.corp.google.com/develop/ui/compose/animation/customize)

Learn how to customize your animations duration, easing curve and spring configuration.  
[Customize](http://android.devsite.corp.google.com/develop/ui/compose/animation/customize)  
[![](http://android.devsite.corp.google.com/static/images/picto-icons/bug-2.svg)](http://android.devsite.corp.google.com/develop/ui/compose/animation/testing)  

### [Test animations](http://android.devsite.corp.google.com/develop/ui/compose/animation/testing)

Learn how to write tests for your animations.  
[Testing](http://android.devsite.corp.google.com/develop/ui/compose/animation/testing)  
[![](http://android.devsite.corp.google.com/static/images/picto-icons/spanner.svg)](http://android.devsite.corp.google.com/develop/ui/compose/animation/tooling)  

### [Android Studio Tooling](http://android.devsite.corp.google.com/develop/ui/compose/animation/tooling)

Learn all about how to preview your animations in Android Studio.  
[Tooling](http://android.devsite.corp.google.com/develop/ui/compose/animation/tooling)