Choosing an animation API

Jetpack Compose Junior Kotlin 2.0+ API 24+ Reviewed By Best Latest Apps

Pick the fix

A details panel should slide in and out when expanded changes. Which is the simplest correct API?

Options
Hint 1 of 1

Is this about one value or about appearing and disappearing?

Choose an answer, then open Show answer below to check it.

Show answer

Answer: A AnimatedVisibility(expanded) { Details() }

Correct. It animates entering and leaving composition.

Why not the others?
  • B animateFloatAsState for alpha, and keep the panel always composed. It fades but still takes space and stays composed.
  • C A LaunchedEffect that changes height every 16 ms. Hand-rolled animation is janky and fights the frame clock.
  • D Crossfade(expanded). Crossfade swaps two contents; it doesn't slide one in and out.

30-second answer

For one value, use animate*AsState (like animateDpAsState). For showing and hiding, use AnimatedVisibility with enter and exit transitions. For swapping content based on state, use AnimatedContent or Crossfade. For several values driven by one state, use updateTransition. For gestures or full control, use Animatable.

Practise saying it · 30 s. No recording, just a timer

Map animation APIs to use cases.

Say your answer out loud, then check which of these points you covered:

  • animate*AsState for one value
  • AnimatedVisibility for show/hide
  • AnimatedContent for switching
  • updateTransition / Animatable for more

Deep dive

animateContentSize() animates a container's size change with one modifier.

Read fast-changing animated values in graphicsLayer { } to skip recomposition.

Use rememberInfiniteTransition for loops like a pulsing placeholder.

Compose scales its animations by the system animator duration scale; for large decorative motion, also offer a static version when users turn animations off.

Common mistakes

  • Driving an animation with a LaunchedEffect loop and delay.
  • Using AnimatedVisibility but leaving a fixed-size container so nothing moves.
  • Animating layout every frame when a graphicsLayer transform would do.

Senior take & follow-ups

Map each use case to one API quickly; that's what this question tests.

Follow-up questions

Think of your answer first, then open the hint.

  1. How do you animate a gesture-driven value?

    Show hint

    Animatable with snapTo during the drag and animateTo on release.

  2. Why use updateTransition?

    Show hint

    To keep several animated values in sync with one state.

Similar on iOS: .animation(_:value:) vs withAnimation SwiftUI animations are attached to state changes; Compose picks an API per case.

Related questions

Suggest a fix if something here is wrong or out of date.