Skip to content
MAD Notes

Animatable

A value-based animation method for fine-grained control.

Create Animatable

Section titled “Create Animatable”
val offsetX = remember { Animatable(0f) }

animateTo() - Animate to target value

Section titled “animateTo() - Animate to target value”
offsetX.animateTo(
    targetValue = maxWidth.toFloat(),
    animationSpec = tween(durationMillis = 4000, easing = LinearEasing)
)

snapTo() - Set value instantly without animation

Section titled “snapTo() - Set value instantly without animation”
offsetX.snapTo(0f)

Gesture-based Animation

Section titled “Gesture-based Animation”
val offsetX = remember { Animatable(0f) }


Box(
    Modifier
        .offset { IntOffset(offsetX.value.roundToInt(), 0) }
        .pointerInput(Unit) {
            detectDragGestures(
                onDragEnd = {
                    // Snap back to origin
                    coroutineScope.launch {
                        offsetX.animateTo(
                            targetValue = 0f,
                            animationSpec = spring()
                        )
                    }
                },
                onDrag = { change, dragAmount ->
                    change.consume()
                    coroutineScope.launch {
                        offsetX.snapTo(offsetX.value + dragAmount.x)
                    }
                }
            )
        }
)