Spring animations with MotionLayout in Android app

Implementing Spring Animations in Android Applications (MotionLayout)

Android developers worked with ValueAnimator and ObjectAnimator + AccelerateDecelerateInterpolator for years. Spring physics appeared officially with Jetpack's SpringAnimation in 2018, and MotionLayout that same year provided a declarative way to describe complex animation transitions. Today we have two clearly separated tools for different tasks.

SpringAnimation: Physics in Code

androidx.dynamicanimation:dynamicanimation is the library for spring and fling animations of individual View properties.

implementation "androidx.dynamicanimation:dynamicanimation:1.0.0"

val springAnim = SpringAnimation(cardView, DynamicAnimation.TRANSLATION_Y).apply {
    spring = SpringForce(0f).apply {  // target position — 0f (original)
        stiffness = SpringForce.STIFFNESS_MEDIUM       // 1500f
        dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY  // 0.75f
    }
}
springAnim.start()

Stiffness presets: STIFFNESS_HIGH (10000), STIFFNESS_MEDIUM (1500), STIFFNESS_LOW (200), STIFFNESS_VERY_LOW (50). DampingRatio: NO_BOUNCY (1.0), LOW_BOUNCY (0.75), MEDIUM_BOUNCY (0.5), HIGH_BOUNCY (0.2).

For gesture-driven spring, pass velocity from VelocityTracker:

val vt = VelocityTracker.obtain()
// in onTouchEvent add vt.addMovement(event)
vt.computeCurrentVelocity(1000) // pixels per second
springAnim.setStartVelocity(vt.yVelocity)
springAnim.animateToFinalPosition(targetY)

animateToFinalPosition is more convenient than start() for repeated calls: if animation is running, just change target without abrupt restart.

Practical case: bottom sheet with drag. User drags down, releases—sheet springs or closes depending on velocity and position. Logic: if downward velocity > 1000 dp/s or sheet is below 40% height → animate to bottom and dismiss. Otherwise → spring back to original position. All via SpringAnimation with setStartVelocity from VelocityTracker.

MotionLayout: Declarative Transitions

MotionLayout is a ConstraintLayout subclass managing animation via MotionScene XML. Ideal for structural layout changes (not just translation/scale, but constraint changes).

<!-- res/xml/scene_collapsing.xml -->
<MotionScene>
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/header"
            android:layout_height="200dp"
            ... />
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/header"
            android:layout_height="56dp"
            ... />
    </ConstraintSet>
    <Transition
        android:id="@+id/transition"
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="400">
        <OnSwipe
            motion:touchAnchorId="@+id/recyclerView"
            motion:touchAnchorSide="top"
            motion:dragDirection="dragUp" />
    </Transition>
</MotionScene>

Spring in MotionLayout via motion:transitionEasing:

<KeyAttribute
    motion:framePosition="100"
    motion:motionTarget="@+id/fab"
    motion:transitionEasing="overshoot(2.5)">
    <CustomAttribute
        motion:attributeName="scaleX"
        motion:customFloatValue="1.0" />
</KeyAttribute>

overshoot(tension), anticipate(tension), anticipateOvershoot(tension) are built-in easing functions with spring effect. Not true physical model, but sufficient for most UI transitions.

For true spring in MotionLayout use KeyCycle with sine wave approximation of spring physics. Laborious, but full control.

Compose: spring() Specification

In Jetpack Compose, spring animations are first-class citizens:

val offset by animateFloatAsState(
    targetValue = if (isExpanded) 0f else -300f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    )
)

Animatable for gesture-driven:

val animatable = remember { Animatable(0f) }
LaunchedEffect(dragEnd) {
    animatable.animateTo(
        targetValue = 0f,
        animationSpec = spring(stiffness = Spring.StiffnessMedium),
        initialVelocity = lastVelocity
    )
}

initialVelocity in Compose is in value units per second. Working with offset in pixels: velocity from detectDragGestures is already pixels/second, pass directly.

Timeline

Spring animations for 2–4 separate UI elements via SpringAnimation take 1 day. MotionLayout scene with gesture-driven transition (collapsing header, expandable card) takes 1–2 days. Full screen with complex animation system takes 2–3 days. Cost is calculated individually.