Spring

You might say

Give the dialog a small springy bounce when it appears.

Create motion that settles with weight and elasticitySpring motion is defined by physical-style values such as stiffness and damping rather than only a fixed curve. It suits direct manipulation and elements that need to settle into place. Too much bounce makes routine actions feel slow and unstable.

Know first

Animation Easing

First cross the target value and then return to the stable position: overshoot (overshoot) and rebound

When to use it

Drag-and-drop settling
Interactive sheet or drawer
Reordering items
A playful control with direct manipulation

When NOT to use it

Add bounce to every button
Let overshoot cover nearby content
Use a spring where precise timing must match another event
Ignore reduced-motion preferences

Anatomy

stiffnessdampingtarget value

Stiffness: how strongly the spring pulls toward its target.

Damping: how quickly the motion loses energy and stops bouncing.

The value briefly passes the target, then settles back into place.

The final resting position

Variants

Stiff

For a crisp, restrained feel in a productivity tool

Soft

For a gentle, lively feel in a content or social product

No Bounce

When you want the motion to feel alive without overshooting

Typical use cases

Draggable card

Original position

↩

Home page revision review

Draging...rebound when you let go

spring: Let go and rush back to the original position, overshoot lightly and then stop, as if there is physical quality

Bottom sheet

Invite members

scale briefly crosses 1 and then returns to a stable value; the afterimage indicates the position of the previous frame

Reordered list

Notification reminder

The slider briefly crosses the target position and then rebounds; the residual image on the left indicates the movement trajectory

Playful toggle

In progress ▾

All status

In progress

Completed

Elastic expansion from the trigger point: scale 0.96 → 1, the dotted line is the previous frame