Choose the transition mode first
The button editor supports tween, duration-based spring and physics-based spring modes. Tween uses timing and easing, duration-based springs use duration and bounce, and physics springs use stiffness, damping and mass.
Settings for other modes are kept when you switch. Stored values are not all active at once.
Duration-based springs: timing, then bounce
The default button uses duration-based spring timing of 420 ms and bounce 0.25. Duration controls the perceived rhythm, not an exact settling time.
Keep the press geometry fixed while changing duration. Then keep duration fixed and change bounce, observing overshoot and recovery.
Physics springs: isolate the variables
The snapshot also keeps stiffness 260, damping 24 and mass 1. Those values affect the transition only in physics mode; together they determine settling behavior.
| Parameter | What it represents | Comparison |
|---|---|---|
| stiffness | Restoring force | Keep damping and mass fixed. |
| damping | Dissipation in the motion | Keep stiffness and mass fixed. |
| mass | Mass in the spring calculation | Keep stiffness and damping fixed. |
Distinguish delay, timing and observation speed
Delay controls when motion begins. Animation parameters control the transition. Observation speed changes only how you inspect it.
The editor displays time in milliseconds; Motion transition duration and delay use seconds. Confirm the configuration layer and units before copying values into code.
Check a complete input sequence
Hold and release
Inspect both the held state and recovery.
Press during recovery
Look for jumps or a stuck state as motion redirects.
Change input and motion preferences
Try Space or Enter and the system reduced-motion preference.