How to create physics-based animation such as fling and spring animation in jetpack compose?

We will explore Compose animations API to create physics-based cool animations.

What we’re going to implement

1. Spring release animation
2. Fling animation
3. Chain spring animations

But first, let’s get familiar with spring animation. Spring is physics-based animation, unlike other animations, it adds a more natural and smooth effect in motion.

In Jetpack compose, we have spring AnimationSpec to customize animations. SpringSpec takes three parameters.

1. DampingRatio — define the bouncy of spring. The lower the damping ratio, the higher the bounciness. The default value is DampingRatioNoBouncy

2. Stiffness — is something like animation duration, it defines the speed of spring to the final position. The default value is Spring.StiffnessMedium

3. VisibilityThreshold — specifies the visibility threshold.

Check out the project on github for the complete working solution and example.

For full version of this post, visit canopas blog .