Designing with Motion in Mind

Most product teams treat motion as a finishing pass. The interface is already shipped, the layouts are already locked, and animation gets added at the end as a visual upgrade. That usually produces decorative movement instead of useful movement.

The better approach is to think about motion at the same time you think about structure, pacing, hierarchy, and intent. A moving interface is still an information system. Motion should explain what changed, where attention should go next, and how the user should interpret space.

Motion Is Product Language

Motion is not just polish. It can communicate:

1. Relationship between elements
2. Cause and effect after an interaction
3. Relative priority between competing surfaces
4. Continuity during layout changes
5. Confidence or fragility in the overall experience

If a modal fades in with no spatial logic, it feels detached from the page. If it expands from the trigger or establishes a clear stacking relationship, the transition feels much easier to parse.

Good motion reduces cognitive load. Bad motion adds it.

Start with the State Model

Before choosing easing curves or durations, map the interface states. The important question is not “How should this animate?” but “What state transitions exist and what does the user need to understand during each transition?”

For a common navigation overlay, the state model might look like:

• Closed
• Opening
• Open
• Closing
• Interrupted while opening
• Interrupted while closing

That sounds obvious, but many interfaces only account for the first four states. The moment a user taps twice, navigates quickly, or triggers a second event before the first transition is complete, the animation model breaks down.

type MenuState =
  | "closed"
  | "opening"
  | "open"
  | "closing";

let state: MenuState = "closed";

function toggleMenu() {
  state = state === "open" || state === "opening" ? "closing" : "opening";
}

The code is simple, but the design implication is more important: motion becomes predictable when the underlying state model is explicit.

Define What Should Move

Not everything needs animation. Interfaces feel more intentional when only the structural elements with clear meaning move.

The most reliable set of motion-friendly properties is still:

• transform
• opacity
• filter in moderation
• clip-path when the effect is essential and tested carefully

Properties that often create trouble:

• width
• height
• top / left
• margin
• box-shadow when animated continuously

When in doubt, ask whether the motion is describing position or layout recalculation. The first is usually safe. The second is where frame drops begin.

Establish a Timing System

Teams often pick durations ad hoc. That creates interfaces where different components feel like they were borrowed from different products.

A small timing system is usually enough:

Duration is only one part of the feel. Easing matters just as much. Snappy UI feedback usually benefits from fast acceleration and slightly softer deceleration. Large overlays or page-level transitions can tolerate slower ramps.

const transition = {
  duration: 0.28,
  ease: [0.16, 1, 0.3, 1],
};

That kind of curve works well for panels, menus, and cards because it feels decisive without becoming abrupt.

Design for Interruption

Interruption is one of the biggest differences between motion that feels premium and motion that feels fragile.

If the user scrolls while a header is expanding, what happens? If the user reopens a closing panel, does it reverse naturally or snap? If the user prefers reduced motion, does the interaction still preserve hierarchy?

Libraries that support springs or interruptible timelines make this much easier, but the design still needs to account for it.

import { animate } from "motion";

let controls;

function reveal(node) {
  controls?.stop();
  controls = animate(
    node,
    { opacity: [0, 1], y: [16, 0] },
    { duration: 0.35, easing: [0.16, 1, 0.3, 1] }
  );
}

The important part is not the library call. It is the decision to treat animation as something that may be redirected at any point.

Accessibility Is a Motion Constraint

There is still a tendency to treat accessibility as a separate concern from animation craft. In practice, accessibility makes the work better.

Useful guidelines:

• Respect prefers-reduced-motion
• Avoid continuous, ambient movement near reading content
• Keep parallax restrained or disable it on small screens
• Do not hide essential information inside motion alone
• Make focus transitions clear even with reduced movement

For some users, the best version of a transition is a short opacity change or no transition at all.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

This is not anti-motion. It is motion with constraints.

Mobile Changes the Rules

Motion that feels great on a desktop simulator can fall apart immediately on a phone. Mobile browsers add their own friction:

• Less GPU headroom
• Toolbar collapse and expansion
• Smaller visual viewport
• More obvious dropped frames
• Stronger penalty for blur and backdrop effects

On mobile, subtlety matters more. A simple slide, fade, or scale often feels more refined than an elaborate layered choreography.

A Practical Review Checklist

Before shipping a motion-heavy component, review it against a short checklist:

1. Does the transition explain a change in state?
2. Can it be interrupted without visual corruption?
3. Are the animated properties cheap to render?
4. Does it remain understandable with reduced motion?
5. Does it still feel good on a mid-range phone?

If the answer to any of those is no, the problem is usually not the easing curve. It is the concept.

Closing Thought

The most memorable interfaces are not the ones that move the most. They are the ones where every transition feels like part of the product’s logic.

When motion is planned early, it stops being decoration. It becomes structure.