Animation in Compose

See how to animate state values, using transitions, animating visibility or size changes and crossfades by using the Compose animation APIs.

Key points

  • The animate*AsState API is useful for animating a single value based on a state change.
  • To animate multiple values at the same time, create a transition with the updateTransition function.
    • You can declare each animation value with an extension function on the transition object.
  • To customize the animation behavior, specify the transitionSpec parameter.
  • AnimatedVisibility is useful for animating appearance and disappearance.
  • Customize animation behavior by specifying parameters for enter and exit.
  • To animate size changes of elements, use the animateContentSize modifier.
  • To animate changes when you swap out portions of your UI, use the Crossfade composable.

Parent collections

This series of videos introduces various Compose APIs, quickly showing you what’s available and how to use them.
Quick guide collection
Discover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel.
Quick guide collection

Have questions or feedback

Go to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts.
Go to FAQ Leave feedback