Use motion to explain change
Make transitions responsive, interruptible, and appropriate to the task and user preferences.
Why this matters
Say someone opens your menu, then instantly changes their mind and closes it. Does the interface keep up, or does it play out an animation while they wait? Motion should explain what changed — not make them wait.
A control people use often must stay prompt. Do not make people wait for a visual sequence before they can read or act.
What to understand
Start from the state change. Add animation only if it helps someone understand where things went or feel acknowledged.
Keyframe animations can be paused or canceled. They are not inherently uninterruptible. Ask your agent: "what happens if the user reverses this mid-animation?"
Watch for
- A save pretending the server has finished before it has.
- A menu that can't reverse cleanly when opened then immediately closed.
- Layout-property animation across large regions causing jank.
- Assuming transforms and opacity are always cheap at scale.
- Uncontrolled decorative movement behind reading content.
- A page transition that drops the keyboard target out of view.
Strong default
Interaction ahead of animation: acknowledge the click right away, end in the right state on reversal, prefer transforms and opacity, measure the real interaction including compositing. Centralize timing and easing once their roles are clear.
When this doesn't apply
The duration below is an example, not a universal timing token. Don't lift it into every interaction. Don't animate to decorate — if the change is already clear without movement, ship the instant state change.
In practice
| Mechanism | Useful for | Design responsibility |
|---|---|---|
| CSS transition | Moving between style states such as open and closed. | Handle reversals cleanly. |
| CSS keyframes | A timed sequence or repeated indicator. | Define what pauses, cancels, or replaces it. |
| Animation library | Gestures, springs, shared geometry, or coordinated states. | Keep focus and interruptions working. |
A menu opened then immediately closed should end in the right state. A save should acknowledge the click right away, without pretending the server has finished.
Avoid animating layout properties — values that force the browser to recalculate positions — across large regions. That recalculation causes jank, visible stutter.
Transforms and opacity usually avoid that work, but they can still get expensive at scale. Measure the real interaction, including compositing (how the browser layers and draws the result), rather than assuming a property is always cheap.
.action {
transition: background-color 140ms ease;
}
@media (prefers-reduced-motion: reduce) {
.action {
transition: none;
}
}The duration is an example, not a universal timing token. Centralize timing and easing once their roles are clear.
Say someone asks for less motion in their system settings. Replace nonessential movement with an instant state change. Keep the outcome and feedback. Check that content still works when animations are off or cut short.
Do not run uncontrolled decorative movement behind reading content. Automatically moving regions may need pause or stop controls, depending on behavior and accessibility rules.
A page transition affects focus, scroll position, persistent layout, and when content becomes usable. A beautiful transition that drops the keyboard target out of view is unfinished.
For drag interactions, supply an equivalent button, menu, or field where required. Ask your agent: "can someone reach this action without touch gestures?"
Verify
Test repeated clicks, reversal, slow responses, reduced-motion preference, keyboard input, and slower devices. Record a short video when timing is the point. A still screenshot cannot show it.
Related skills
Use $craft for motion within the whole interface. Pair it with performance and accessibility.
Last updated on