Animations in Compose

Jetpack Compose provides powerful and extensible APIs that make it easy to implement various animations in your app's UI. This document describes how to use these APIs as well as which API to use depending on your animation scenario.

Overview

Animations are essential in a modern mobile app in order to realize a smooth and understandable user experience. Many Jetpack Compose Animation APIs are available as composable functions just like layouts and other UI elements, and they are backed by lower-level APIs built with Kotlin coroutine suspend functions. This guide starts with the high-level APIs that are useful in many practical scenarios, and moves on to explain the low-level APIs that give you further control and customization.

The diagram below helps you decide what API to use to implement your animation.

• If you are animating content change in layout:
  • If you are animating appearance and disappearance:
    • Use AnimatedVisibility.
  • Swapping content based on state:
    • If you are crossfading content:
      • Use Crossfade.
    • Otherwise, use AnimatedContent.
  • Otherwise, use Modifier.animateContentSize.
• If the animation is state-based:
  • If the animation happens during composition:
    • If the animation is infinite:
      • Use rememberInfiniteTransition.
    • If you are animating multiple values simultaneously:
      • Use updateTransition.
    • Otherwise, use animate*AsState.
• If you want to have fine control over animation time:
  • Use Animation, such as TargetBasedAnimation or DecayAnimation.
• If the animation is the only source of truth
  • Use Animatable.
• Otherwise, use AnimationState or animate.