Jetpack compose onDragStopped animation

Resources

• Jetpack Compose drag documentation
• Jetpack Compose drag documentation
• DraggableState documentation
• Animatable documentation

Just show me the code

• SMOOTH ANIMATION DEMONSTRATION HERE
• BAD ANIMATION DEMONTRATION HERE
• Add this code to make drag animation resets smoother:

    var offsetX by remember { mutableStateOf(0f) }
    val draggableState = DraggableState { delta ->
            offsetX += delta
    }
   Box(
        modifier = Modifier.draggable(
            orientation = Orientation.Horizontal,
            state = draggableState,
            onDragStopped = {

                draggableState.drag(MutatePriority.PreventUserInput) {
                    Animatable(offsetX).animateTo(
                        targetValue = 0f,
                        tween(durationMillis = 300)
                    ) {
                        dragBy(value - offsetX)
                    }
                }
            }
    )
    ){
       //The Column is the item that will do the moving
        Column(
            modifier = Modifier
                .offset { IntOffset(offsetX.roundToInt(), 0) }
                ) {
      }
}

Conclusion

• Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on Twitter.