Motion
Compare two timings for the same movement. Choose a setting, then Replay.
Marker destination
Motion tips & implementation
Start quickly. Settle gently.
Ease-out makes the response visible early. Compare it with ease-in at the same duration.
Which easing fits?
Use ease-out for quick feedback, ease-in-out for travel between two points, and linear for constant speed. Back, bounce, and elastic are useful comparisons; give overshoot a reason to exist.
What makes a spring different?
Stiffness pulls, damping settles, and mass adds weight. The settling time is calculated here. This sampled spring retargets from the current position; a gesture spring should preserve velocity too.
How do I check interruption?
Start a longer move, then reverse before it finishes. It should continue from the visible position. No jump to the old start. No queue of outdated movement.
How long should it take?
Try 180 ms for a small control and 300 ms for a larger panel, then adjust in context. The two slots let you compare the same movement. Quarter speed makes timing problems easier to spot.
What about accessibility?
Arrow-key selection is immediate. Reduced motion removes travel and keeps the selected destination. System preference wins, even when it changes during playback.
Use it in a project
The exported CSS contains your timing and sampled easing curve. Use “Use in your project” in Workshop for a brief with your settings. Source and implementation notes are included.