The first rule of motion is humility. Animation should help people understand what just happened and where they can go next. When it congratulates itself, it’s theater. When it explains, it’s elegance.
Micro-time, macro-trust
Most of the work happens between 120–300ms — the pocket where cognition meets instinct. A hover that answers “yes, this is clickable.” A fade that confirms “you didn’t lose your place.” These micro-moments compound into trust.
- 120–180ms: tooltips, button taps, hover cues.
- 180–240ms: page section reveals, small overlays.
- 240–300ms: modal entrances, list reorders.
Physics over flair
Treat motion like a physics engine: cause, direction, and momentum. Buttons don’t teleport state; they ease into it. Modals arrive from a plausible origin. Lists reorder with a logic the eye can follow.
- Enter = ease-out (fast start, gentle settle).
- Exit = ease-in (graceful leave).
- State change = spring (quick overshoot, quick settle for visibility).
Motion that listens
Not everyone wants choreography. Respect prefers-reduced-motion. Swap animated cues for still ones: contrast, elevation, and microcopy.
- Keep spatial hints (origin/target) without animation via shadows and borders.
- Replace timing with color steps (rest → focus → active).
- Never hide progress behind motion; motion follows truth.
Brand in the in-betweens
If your product promises calm, transitions should breathe. If it promises speed, state changes feel instant yet legible. Motion is tone — speak in character.
Elegance is motion with manners — always arriving on time, never overstaying.
QA checklist (ship today)
- All interactive elements have visible focus rings.
- Durations standardized to 3–4 tokens (e.g., 120/180/240/300ms).
- Consistent easing by semantic role (enter/exit/state-change).
- Reduced-motion mode removes nonessential animations and keeps feedback.
- Loaders explain cause + ETA and allow cancel/retry when possible.
At Logically Incorporated, we prototype animation like features. The web isn’t only what you build; it’s also how it moves. Teach the physics well and the product starts to feel inevitable.
Logically Incorporated — we build coherence where others build code.