Frontend

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.

Also calledSpring Animation

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

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