Spring Animations

As keyframe easings are made with a curve and a fixed duration, they can't provide perfectly natural motion. Spring animations are based on the behavior of an object attached to a spring in a physical world, so it feels more natural.

Implementing spring animations on the web require JavaScript and a framework like Motion or React Spring. These libraries can be quite large in size.

Uses parameters mass, velocity and tension. This is somewhat analogous to spring-mass-damper system in engineering.

Spring animations are not parameterized by duration, making them continuous and fluid.

Heavily used in iOS and is the default animation in SwiftUI.

• Apple uses alternative parameters Duration and Bounce.
• Duration here is perceptual, meaning the animation feels like its complete by that point, even though subtle movement might still be happening.

Spring animations are interruptible. It uses the velocity it had when it was re-targeted on interruption, making the movement feel smooth and natural.

While spring animations can have a bouncy effect, there are only a few instances in product UI where its appropriate. (For example; a slight bounce at the end of a drag gesture.)

• Do not use bounce most of the time.
• A very small value should be used if you decide to use it.