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.
Spring Animation
You can say this to an AI Agent
Use the animation approach already present in the project to add a subtle spring when a draggable card returns to its target after release. Animate only its position; do not change the card content or drag rules. Allow at most one small overshoot and make it settle quickly. When reduced motion is enabled, return directly to the target. Test short drags, long drags, repeated drags, and reduced-motion mode, and confirm the card neither keeps wobbling nor covers nearby content.
When to use it
- Drag-and-drop settling👆Release ↩Release after dragging and it springs back into place.
- Interactive sheet or drawerA slight overshoot can add energy to low-risk entrances.
- Reordering itemsStiffnessDampingStiffness affects response speed; damping affects how oscillation decays.
- A playful control with direct manipulationtype: "spring"This configuration enables Framer Motion’s spring model.
When NOT to use it
- Add bounce to every buttonRepeated rebounds delay the stable state and distract attention.
- Let overshoot cover nearby contentConfirm transfer of ¥50,000?CancelConfirm
- Use a spring where precise timing must match another eventToo little damping lets oscillation last too long.
- Ignore reduced-motion preferencesWhen every element rebounds at once, hierarchy and emphasis weaken.
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
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Quick check