Keep a good idea.
One tap. A small acknowledgement.
THE SPACE BETWEEN STATES.
Make it
feel something.
A small laboratory for motion with intention.
Tune the timing. Find the feeling. Take it with you.
A PHYSICAL RESPONSE / TRY IT WITH YOUR HAND
Feel the difference.
DIRECT MANIPULATION / RELEASE TO RETURNPOSITION + VELOCITY → RESPONSE
Pull. Let go. Notice the landing.
Soft deceleration. Almost no overshoot.
MASS 1 / STIFFNESS 120 / DAMPING 20Ready. Drag the form or use your keyboard.
FROM A → TO B
AB
✳
TIME →
BEFORE THE CURVE, THE QUESTION
What should the person
understand now?
Motion has a job: connect a cause to its effect. Choose an intention to see why the timing changes, then load that curve into the editor.
✓
ACTION → ACKNOWLEDGEMENT180 MS / QUICK AND CERTAIN
Yes, that happened.
A save action needs a clear answer. A short change of scale acknowledges the tap while the checkmark and label communicate the lasting state. The animation can end; the answer should remain.
Keep confirmation faster than the person’s next decision.
ONE DISTANCE / THREE INTENTIONS
Timing changes
the meaning.
Watch three responses travel the same distance. Scrub the score to see exactly where their characters diverge.
01 / ACKNOWLEDGEQuick & certain.
✓
02 / ORIENTA connected change.
↗
03 / SETTLEA little weight.
✳
The start is shared. The arrival is a design decision.
02 / DESIGN THE IN-BETWEEN
Your own kind
of movement.
Drag the control points. Fine-tune with the sliders. Take the exact curve into your next interface.
TIME →PROGRESS →
CONTROL THE FEELING
A curve with
your signature.
SMALL DETAILS. REAL FEELING.
Try a little
back and forth.
Feedback should feel immediate.
And leave the interface a little clearer.
A different shape.
Same object. A new point of view.
The thought behind it.+
A small transition helps people follow a change. When the movement becomes the main event, it is probably doing too much.
Let the answer unfold.
Clear state. Considered timing.
Good motion
makes the interface
feel understood.
Every experiment respects your reduced-motion preference.
Pause ambient motion to keep the page still; use Replay to inspect an interaction.