DEV Community

myougaTheAxo
myougaTheAxo

Posted on

AnimationSpec Guide in Jetpack Compose — tween, spring, snap & keyframes

#android #animation #jetpackcompose #kotlin

Jetpack Compose provides multiple AnimationSpec types to control motion timing and behavior:

Tween Animation

animateDpAsState(
    targetValue = 100.dp,
    animationSpec = tween(durationMillis = 300, easing = EaseInOutCubic)
)
Enter fullscreen mode Exit fullscreen mode
  • durationMillis: Total animation duration
  • easing: Interpolation curve (Linear, EaseInOut, EaseIn, EaseOut, CubicBezier)
  • Best for: UI state changes, size/color transitions

Spring Animation

animateDpAsState(
    targetValue = 100.dp,
    animationSpec = spring(dampingRatio = 0.5f, stiffness = Spring.StiffnessMedium)
)
Enter fullscreen mode Exit fullscreen mode
  • dampingRatio: Oscillation (0=oscillate, 1=no overshoot)
  • stiffness: How fast it responds (StiffnessLow/Medium/High)
  • Best for: Natural motion, bounce effects

Keyframes for Complex Paths

keyframes {
    durationMillis = 500
    0.dp at 0 with EaseInOutCubic
    50.dp at 200 with EaseInOutCubic
    100.dp at 500
}
Enter fullscreen mode Exit fullscreen mode
  • Define intermediate values at specific timepoints
  • Best for: Multi-stage animations

Repeatable & Infinitely Repeatable

infiniteRepeatable(
    animation = tween(durationMillis = 500),
    repeatMode = RepeatMode.Restart
)
Enter fullscreen mode Exit fullscreen mode
  • repeatMode.Reverse: Bounces back and forth
  • repeatMode.Restart: Loops from beginning

Snap for Instant Changes

animateDpAsState(
    targetValue = 100.dp,
    animationSpec = snap()
)
Enter fullscreen mode Exit fullscreen mode
  • Instant state change, no animation

Combine multiple specs in updateTransition for complex multi-property animations.

8 production-ready Android app templates on Gumroad.
Browse templates → Gumroad

Top comments (0)