Jetpack Compose Animations: Easing and Interpolations Explained
Animations are one of the most powerful tools for improving user experience in modern mobile applications. A static interface may be functional, but an animated interface feels alive, interactive, and delightful. Subtle motion guides users’ eyes, communicates state changes, and makes apps more engaging.
In Android’s Jetpack Compose, animations are not an afterthought—they are built into the framework from the ground up. Among the core concepts of Compose animations are easing and interpolations, which define how an animation progresses over time. While duration tells us how long an animation runs, easing and interpolations determine how the values change during that duration.
In this article, we’ll take a deep dive into:
- What easing and interpolations are
- Why they matter in animations
- The different easing functions available in Jetpack Compose
- Practical examples with code snippets
- Best practices for designing natural, human-like motion
By the end, you’ll be able to create smooth, polished animations in your Compose apps with confidence.
Understanding the Basics: What is Easing?
When you think of animation, you might imagine something moving from point A to point B. But how does it get there? Does it move at a constant speed, or does it accelerate at first and then slow down?
This is where easing comes in.
Easing functions describe how an animation progresses through time. Imagine a car that drives at the exact same speed no matter what—boring, right? That’s what a linear animation feels like. Easing is the curve in the road that makes the motion interesting and natural. For example:
- A bouncing ball doesn’t move at the same speed throughout—it slows down when it reaches the top and speeds up when falling.
- A button click animation might start fast and then ease out slowly to give a feeling of responsiveness.
In Compose, easing functions are represented by the Easing interface, and you can use them to shape the motion curve of your animation.
What About Interpolations?
While easing is the term commonly used in animation libraries, Android developers are already familiar with interpolators, a concept from the View system.
In Jetpack Compose, easing and interpolation serve the same purpose: they control how animation values change over time. The difference is mostly in naming conventions. Compose adopts Easing, but you can think of it as a modern replacement for the older Interpolator APIs.
Why Easing Matters?
Without easing, every animation would be linear—moving at a constant speed from start to finish. While this works in some cases (like progress bars), most animations feel robotic and unnatural without easing.
Easing makes animations feel:
- Natural – They mimic real-world physics (objects don’t start and stop instantly).
- Expressive – Different easings communicate different emotions. For example, a “springy” animation feels playful, while a “fast-out-slow-in” animation feels smooth.
- Guiding – Motion helps users understand where to focus their attention and what just changed on screen.
Built-in Easing Functions in Jetpack Compose
Compose provides several easing options out of the box, each suited to different scenarios. Let’s go through the most common ones:
1. LinearEasing
val animationSpec = tween(
durationMillis = 1000,
easing = LinearEasing
) 2. FastOutSlowInEasing
val animationSpec = tween(
durationMillis = 1000,
easing = FastOutSlowInEasing
) 3. LinearOutSlowInEasing
val animationSpec = tween(
durationMillis = 1000,
easing = LinearOutSlowInEasing
) 4. FastOutLinearInEasing
val animationSpec = tween(
durationMillis = 1000,
easing = FastOutLinearInEasing
) 5. CubicBezierEasing
val customEasing = CubicBezierEasing(0.4f, 0f, 0.2f, 1f)
val animationSpec = tween(
durationMillis = 1000,
easing = customEasing
) Practical Example: Button Scale Animation
Let’s create a simple button that scales up when clicked, using different easing functions.
@Composable
fun EasingButton() {
var clicked by remember { mutableStateOf(false) }
val scale by animateFloatAsState(
targetValue = if (clicked) 1.2f else 1f,
animationSpec = tween(
durationMillis = 600,
easing = FastOutSlowInEasing
)
)
Button(
onClick = { clicked = !clicked },
modifier = Modifier.scale(scale)
) {
Text("Click Me")
}
}Comparing Different Easings Visually
Imagine animating a circle across the screen.
- LinearEasing → Circle moves at constant speed.
- FastOutSlowInEasing → Circle starts fast and slows as it arrives.
- LinearOutSlowInEasing → Circle starts steady, eases into position.
- FastOutLinearInEasing → Circle darts quickly and stops suddenly.
These subtle differences significantly change the feel of your app.
Advanced Tip: Keyframes with Easing
Sometimes, you want more complex motion where easing changes at different stages. That’s where keyframes come in:
val scale by animateFloatAsState(
targetValue = 1f,
animationSpec = keyframes {
durationMillis = 1200
1.2f at 300 with FastOutSlowInEasing
0.8f at 600 with LinearEasing
1f at 1200
}
)When to Use Which Easing?
- LinearEasing → Progress indicators, timers.
- FastOutSlowInEasing → General UI transitions (recommended default).
- LinearOutSlowInEasing → Enter animations, new content appearing.
- FastOutLinearInEasing → Exit animations, dismiss actions.
- CubicBezierEasing → Custom branding or playful effects.
Conclusion
Easing and interpolations are not just technical details—they are storytelling tools. The way an element moves across the screen communicates intention, personality, and polish. In Jetpack Compose, you have a rich set of easing functions built in, along with the ability to create your own.
