The Ultimate Guide to Jetpack Compose Animation

Did you know that adding animation to your Android apps could boost user engagement by as much as 40 percent? I think of it as injecting personality into your app, building connections that go beyond static text and plain buttons. If you are striving for a fluid, responsive user experience in your Android projects, jetpack compose animation is the tool you want. Let us take a closer look at animation with Jetpack Compose.

I am not only going to show you simple fade effects. I will demonstrate how to unlock the full power of jetpack compose animation, everything from basic transitions to complex and appealing interactions. Whether you are a seasoned Android developer or just starting out with Compose, this guide will give you the knowledge and real world examples you need to breathe life into your user interfaces and deliver a completely new level of excitement to your users.

Animation is not simply cosmetic; it is essential to a great user experience. See how well executed animation can improve the user experience:

• Visual Confirmation: Assure users that their actions have registered.

• Focus Direction: Direct the user's attention to important areas.

• Perceived Performance Boost: Make loading seem faster.

• Refined Aesthetics: Make your app look more professional.

Compose makes animation easy. Its clear method makes defining animation states and transitions more intuitive, which means cleaner code that is easier to maintain. You will spend less effort fighting animation logic and more time improving the user experience.

Getting Started with Jetpack Compose Animation

Before we get into the advanced stuff, let us cover some basic ideas. Compose provides some functions for creating animations:

• animateFloatAsState, animateColorAsState, etc.: These animate a single characteristic (number, color and so on) between two states, ideal for simple transitions.

• AnimatedVisibility: Animates the appearance or disappearance of UI elements, great for smoothly showing and hiding things.

• Transition: A powerful function for organizing animations across multiple characteristics, which lets you define transitions between various UI states.

• rememberInfiniteTransition: Makes animations that loop forever, which is useful for loading spinners or subtle background effects.

These are your building blocks. I will use them a lot in this guide.

Basic Fade In Animation with AnimatedVisibility

Let us begin with a basic fade in effect using AnimatedVisibility.

First, add these dependencies to your build.gradle.kts file:

1dependencies {
2 implementation("androidx.compose.animation:animation-core:")
3 implementation("androidx.compose.ui:ui:")
4 implementation("androidx.compose.material:material:")
5}

Here is the code:

 1import androidx.compose.animation.AnimatedVisibility
 2import androidx.compose.animation.fadeIn
 3import androidx.compose.animation.fadeOut
 4import androidx.compose.foundation.layout.Box
 5import androidx.compose.material.Button
 6import androidx.compose.material.Text
 7import androidx.compose.runtime.
 8import androidx.compose.ui.Alignment
 9import androidx.compose.ui.Modifier
10import androidx.compose.ui.tooling.preview.Preview
11
12@Composable
13fun FadeInExample() {
14 var visible by remember { mutableStateOf(false) }
15
16 Box(contentAlignment = Alignment.Center) {
17 Button(onClick = { visible = !visible }) {
18 Text("Toggle Visibility")
19 }
20
21 AnimatedVisibility(
22 visible = visible,
23 enter = fadeIn(),
24 exit = fadeOut()
25 ) {
26 Text("Now you see me!")
27 }
28 }
29}
30
31@Preview
32@Composable
33fun PreviewFadeInExample() {
34 FadeInExample()
35}

Here is a breakdown:

• mutableStateOf tracks the text visibility.

• The button toggles the visible state.

• AnimatedVisibility animates the Text element appearance depending on the visible state.

• fadeIn() and fadeOut() define the enter and exit transitions.

Run the code and the text will fade in and out with each tap of the button. A simple but effective beginning!

Animating Single Properties with animateAsState

The animateAsState functions (for example, animateFloatAsState, animateColorAsState) are great for animating a single property between two values. Here is an example of animating a circle size.

 1import androidx.compose.animation.core.
 2import androidx.compose.foundation.Canvas
 3import androidx.compose.foundation.gestures.detectTapGestures
 4import androidx.compose.foundation.layout.size
 5import androidx.compose.runtime.
 6import androidx.compose.ui.Modifier
 7import androidx.compose.ui.geometry.Offset
 8import androidx.compose.ui.graphics.Color
 9import androidx.compose.ui.input.pointer.pointerInput
10import androidx.compose.ui.tooling.preview.Preview
11import androidx.compose.ui.unit.dp
12
13@Composable
14fun AnimatedCircle() {
15 var isExpanded by remember { mutableStateOf(false) }
16 val animatedSize by animateFloatAsState(
17 targetValue = if (isExpanded) 200f else 100f,
18 animationSpec = tween(
19 durationMillis = 500,
20 easing = FastOutSlowInEasing
21 )
22 )
23
24 Canvas(
25 modifier = Modifier
26 .size(animatedSize.dp)
27 .pointerInput(Unit) {
28 detectTapGestures {
29 isExpanded = !isExpanded
30 }
31 }
32 ) {
33 drawCircle(
34 color = Color.Red,
35 center = Offset(size.width / 2, size.height / 2),
36 radius = size.minDimension / 2
37 )
38 }
39}
40
41@Preview
42@Composable
43fun PreviewAnimatedCircle() {
44 AnimatedCircle()
45}

A detailed explanation:

• animateFloatAsState animates the circle size between 100dp and 200dp.

• targetValue is based on the isExpanded state.

• animationSpec configures the animation duration and easing. I am using a tween animation that lasts 500 milliseconds with FastOutSlowInEasing.

• A Canvas draws the circle.

• pointerInput and detectTapGestures detect taps to toggle the isExpanded state.

Tap the circle to watch it smoothly grow and shrink. This idea works for animating any floating point property (transparency, rotation, scale and so on).

Coordinating Multiple Animations with Transition

When you need to animate multiple properties at the same time, the Transition function is essential. It helps you define states and how properties animate between them. Let us animate the color, size and location of a square.

 1import androidx.compose.animation.AnimatedContent
 2import androidx.compose.animation.ExperimentalAnimationApi
 3import androidx.compose.animation.SizeTransform
 4import androidx.compose.animation.core.
 5import androidx.compose.animation.togetherWith
 6import androidx.compose.foundation.background
 7import androidx.compose.foundation.clickable
 8import androidx.compose.foundation.layout.
 9import androidx.compose.material.Text
10import androidx.compose.runtime.
11import androidx.compose.ui.Alignment
12import androidx.compose.ui.Modifier
13import androidx.compose.ui.graphics.Color
14import androidx.compose.ui.tooling.preview.Preview
15import androidx.compose.ui.unit.IntSize
16import androidx.compose.ui.unit.dp
17
18enum class BoxState {
19 Small, Large
20}
21
22@OptIn(ExperimentalAnimationApi::class)
23@Composable
24fun AnimatedBox() {
25 var boxState by remember { mutableStateOf(BoxState.Small) }
26 val transition = updateTransition(targetState = boxState, label = "boxTransition")
27
28 val color by transition.animateColor(
29 transitionSpec = { tween(durationMillis = 500) },
30 label = "colorTransition"
31 ) {
32 when (it) {
33 BoxState.Small -> Color.Red
34 BoxState.Large -> Color.Green
35 }
36 }
37
38 val size by transition.animateDp(
39 transitionSpec = { tween(durationMillis = 500) },
40 label = "sizeTransition"
41 ) {
42 when (it) {
43 BoxState.Small -> 50.dp
44 BoxState.Large -> 100.dp
45 }
46 }
47
48 Box(
49 modifier = Modifier
50 .size(size)
51 .background(color)
52 .clickable { boxState = if (boxState == BoxState.Small) BoxState.Large else BoxState.Small }
53 )
54}
55
56@Preview
57@Composable
58fun PreviewAnimatedBox() {
59 AnimatedBox()
60}

Here is the complete explanation:

• An enum BoxState defines two states: Small and Large.

• updateTransition creates a Transition object that tracks the current boxState.

• transition.animateColor and transition.animateDp animate the color and size properties.

• Each property has a transitionSpec (a simple tween animation) and a lambda that provides the value for each state.

• The Box displays the animated square.

• Tapping the box toggles the boxState, which starts the animation.

This shows how powerful Transition is. You can animate as many properties as you need and fine tune the animation with complex transitionSpecs.

Customizing Animation Behavior with animationSpec

The animationSpec setting determines how the animation will act. Compose provides some built in specifications and also lets you make your own.

Tween Animation

tween creates a basic transition that animates a value over a set time. Add an easing function to modify the animation speed during that time.

1tween(
2 durationMillis = 300, // Animation duration in milliseconds
3 easing = LinearEasing // Easing function (for example, LinearEasing, FastOutSlowInEasing)
4)

Spring Animation

spring mimics a spring, creating a bouncy animation.

1spring(
2 dampingRatio = Spring.DampingRatioHighBouncy, // Spring bounciness
3 stiffness = Spring.StiffnessVeryLow // Spring speed
4)

Keyframes Animation

keyframes sets a series of keyframes with values and timestamps, for very precise animation control.

1keyframes {
2 durationMillis = 1000 // Total animation duration
3 0.0f at 0 // Value at the start
4 1.0f at 500 // Value at 500ms
5 0.5f at 750 // Value at 750ms
6 1.0f at 1000 // Value at the end
7}

For ultimate control, implement the AnimationSpec interface to create custom specifications. Note that this is advanced and requires careful coding.

Advanced Animation Techniques in Jetpack Compose

Compose has functions to manage complex situations, such as animating content changes and creating custom transitions.

Animating Content Changes with AnimatedContent

AnimatedContent animates transitions between different content easily.

 1@OptIn(ExperimentalAnimationApi::class)
 2@Composable
 3fun AnimatedCounter() {
 4 var count by remember { mutableStateOf(0) }
 5
 6 Column(horizontalAlignment = Alignment.CenterHorizontally) {
 7 Button(onClick = { count++ }) {
 8 Text("Increment")
 9 }
10
11 AnimatedContent(
12 targetState = count,
13 transitionSpec = { //This defines the animation to run.
14 // Compare the incoming number with the previous number.
15 if (targetState > initialState) {
16 slideInVertically { height -> height } + fadeIn() togetherWith slideOutVertically { height -> -height } + fadeOut()
17 } else {
18 slideInVertically { height -> -height } + fadeIn() togetherWith slideOutVertically { height -> height } + fadeOut()
19 }.using(SizeTransform(clip = false))
20 }
21 ) {
22 Text(text = "Count: $it")
23 }
24 }
25}

Here is what is happening:

• The button increments the count state.

• AnimatedContent animates the change from the previous count to the current count.

• transitionSpec defines the animation using slide in, slide out, fade in and fade out effects for a smooth transition.

Custom Transitions with Transition

To gain even more control, build custom transitions using the Transition function, which you can use to define how properties animate between UI states.

Performance Considerations for Jetpack Compose Animation

Animations can be resource intensive, especially on older hardware. Keep performance in mind as you build animations in Compose.

• Minimize Recompositions: Only update UI elements that must be updated.

• Use Simple Specifications: Complex specifications can hurt performance.

• Profile: Use Android Studio profiling tools to find performance problems.

Resources for Further Learning

I covered a lot in this guide, but there is always more. Here are some resources you may find helpful:

• Android Developers - Compose Animation: Official documentation.

• Jetpack Compose Animation Codelab: A hands on tutorial.

• Jetpack Compose Animation: An article from the Android Developers team.

Best Practices for Effective Animation

Creating great animations means more than knowing the technology. Here are some guidelines to follow:

• Subtlety: Animations should help, not distract. Do not use too many effects or jerky movements.

• Consistency: Keep a consistent animation style.

• Performance: Optimize for speed to prevent lag.

• Cross Device Testing: Test on various devices to be sure the animations look right and perform well.

Common Mistakes to Avoid

Avoid these common errors when using jetpack compose animation:

• Overdoing Animations: Too many animations can be overwhelming.

• Ignoring Performance: Poor performance hurts the user experience.

• Inconsistent Styles: Different animation styles make your app look disorganized.

• Lack of Testing: If you do not test on various devices, your animations may be broken or run poorly.

The Future of Jetpack Compose Animation

Jetpack Compose continues to change and its animation functions get better all the time. Expect more powerful and adaptable tools in the future. Animation will probably become a central element of Android development.

Advanced Animation Examples

Now that I have covered the basics, let us look at some more advanced examples.

Loading Indicator

Loading indicators are often used in user interfaces and can be improved with animation. You can make a simple loading indicator using rememberInfiniteTransition.

 1import androidx.compose.animation.core.
 2import androidx.compose.foundation.Canvas
 3import androidx.compose.foundation.layout.size
 4import androidx.compose.runtime.
 5import androidx.compose.ui.Modifier
 6import androidx.compose.ui.geometry.Offset
 7import androidx.compose.ui.graphics.Color
 8import androidx.compose.ui.graphics.StrokeCap
 9import androidx.compose.ui.graphics.drawscope.Stroke
10import androidx.compose.ui.tooling.preview.Preview
11import androidx.compose.ui.unit.dp
12import kotlin.math.PI
13import kotlin.math.sin
14
15@Composable
16fun LoadingIndicator() {
17 val infiniteTransition = rememberInfiniteTransition()
18 val phase = infiniteTransition.animateFloat(
19 initialValue = 0f,
20 targetValue = 2  PI.toFloat(),
21 animationSpec = infiniteRepeatable(
22 animation = tween(durationMillis = 1000, easing = LinearEasing)
23 )
24 )
25
26 Canvas(
27 modifier = Modifier.size(50.dp)
28 ) {
29 val radius = size.minDimension / 2
30 val strokeWidth = 4.dp.toPx()
31
32 drawArc(
33 color = Color.Blue,
34 startAngle = phase.value,
35 sweepAngle = 270f,
36 useCenter = false,
37 style = Stroke(width = strokeWidth, cap = StrokeCap.Round),
38 topLeft = Offset(size.width / 2 - radius, size.height / 2 - radius),
39 size = size
40 )
41 }
42}
43
44@Preview
45@Composable
46fun PreviewLoadingIndicator() {
47 LoadingIndicator()
48}

This code creates a rotating arc that loops indefinitely using rememberInfiniteTransition.

Swipe to Dismiss

The swipe to dismiss pattern offers a way to remove items from a list. I will show you how to implement a basic swipe to dismiss animation using SwipeableState.

 1import androidx.compose.animation.core. // ktlint-disable no-wildcard-imports
 2import androidx.compose.foundation.background
 3import androidx.compose.foundation.gestures.Orientation
 4import androidx.compose.foundation.layout.
 5import androidx.compose.material.
 6import androidx.compose.runtime.
 7import androidx.compose.ui.Alignment
 8import androidx.compose.ui.Modifier
 9import androidx.compose.ui.graphics.Color
10import androidx.compose.ui.platform.LocalDensity
11import androidx.compose.ui.tooling.preview.Preview
12import androidx.compose.ui.unit.Dp
13import androidx.compose.ui.unit.IntOffset
14import androidx.compose.ui.unit.dp
15import kotlin.math.roundToInt
16
17@OptIn(ExperimentalMaterialApi::class)
18@Composable
19fun SwipeToDismissItem() {
20 val swipeableState = rememberSwipeableState(0f)
21 val density = LocalDensity.current
22 val endAnchor = 200.dp
23 val endAnchorPx = with(density) { endAnchor.toPx() }
24 val anchors = mapOf(
25 0f to 0, // Item is not swiped
26 endAnchorPx to 1 // Item is swiped to the end
27 )
28
29 val backgroundColor = if (swipeableState.offset.value > 0) Color.Green else Color.Red
30 val text = if (swipeableState.offset.value > 0) "Swiped Right" else "Swipe Me"
31
32 Box(
33 modifier = Modifier
34 .fillMaxWidth()
35 .height(100.dp)
36 .swipeable(
37 state = swipeableState,
38 anchors = anchors,
39 orientation = Orientation.Horizontal
40 )
41 .background(backgroundColor)
42 ) {
43 Text(
44 text = text,
45 modifier = Modifier.align(Alignment.Center)
46 )
47 }
48
49 LaunchedEffect(swipeableState.currentValue) {
50 if (swipeableState.currentValue == 1) {
51 // Item has been swiped to the end
52 println("Item dismissed!")
53 // You can add logic here to remove the item from the list
54 }
55 }
56}
57
58@Preview
59@Composable
60fun PreviewSwipeToDismissItem() {
61 SwipeToDismissItem()
62}

In this example, SwipeableState watches the swipe progress. The anchors map defines the swipe positions (not swiped and fully swiped). LaunchedEffect watches the currentValue and starts an action (printing a message) when the item has been fully swiped.

Leveraging Kotlin for Expressive Animations

Compose uses Kotlin and Kotlin features (coroutines and extension functions) to make animation creation easier. You can use coroutines for complex sequences and extension functions for custom specifications.

Jetpack Compose and Kotlin provide a great place to build great looking animations in your Android apps.

I have covered a lot about jetpack compose animation, from basic concepts to advanced functions. I have shown you how to use the core animation tools, change specifications and make complex sequences. Remember that animation is more than just looks; it helps you build a user experience that feels natural, fluid and appealing. I trust these animation methods will help you build fantastic applications as you continue your Android work.