Motion Design Basics

Motion With a Purpose

Animation in interfaces is not decoration. Good motion explains what is happening: where a screen came from, what changed, what is loading and where to look next. Bad motion is slow, distracting and makes people wait.

Google's Material Design, Apple's Human Interface Guidelines and IBM's Carbon all include detailed motion guidelines, because motion is part of how a product communicates.

---

What Motion Is For

1. Orientation: a bottom sheet slides up from the bottom, so users know that swiping down dismisses it.
2. Feedback: a button presses in and a checkmark draws itself after payment.
3. Continuity: a product card expands into the full product page, so the user does not lose their place.
4. Attention: a gentle shake on a wrong PIN, or a badge that pulses once.
5. Perceived performance: skeleton screens with a shimmer feel faster than a blank page with a spinner, which is important when data is slow.

If an animation does none of these things, question whether it should exist.

---

Easing: How Things Accelerate

In the real world, nothing starts or stops instantly. A car speeds up and slows down. Easing describes how an animation's speed changes over time, and it is what makes motion feel natural.

• Linear: constant speed. Feels robotic. Use it only for things like spinners and progress bars.
• Ease-out (decelerate): starts fast, ends slowly. Best for elements entering the screen, because the response feels instant and then settles gently.
• Ease-in (accelerate): starts slowly, ends fast. Best for elements leaving the screen.
• Ease-in-out (standard): slow, fast, slow. Good for elements moving from one place to another on screen.
• Spring / overshoot: goes slightly past the target and settles back. Playful and energetic, and good for toggles and likes.

Easing is defined with a cubic Bézier curve: cubic-bezier(x1, y1, x2, y2). Material's standard curve is cubic-bezier(0.2, 0, 0, 1). The curve plots progress (vertical) against time (horizontal). A steep start means a fast start.

---

Duration: How Long

• Small changes (toggles, button states, icon swaps): 100 to 200ms
• Medium changes (cards expanding, dropdowns, bottom sheets): 200 to 300ms
• Large or full-screen transitions: 300 to 500ms
• Exits can be a little faster than entrances, because users are already moving on.

Rules of thumb:

• Anything over 500ms starts to feel slow for everyday UI.
• Larger distances need slightly longer durations, but not proportionally longer.
• Mobile animations are usually shorter than desktop ones, because the screen and the movements are smaller.

---

Choreography: Moving Things Together

When several elements animate, choreography decides the order.

• Stagger: items in a list appear one after another, 20 to 50ms apart, which guides the eye top to bottom. Keep the total short, since 20 items × 100ms is two seconds of waiting.
• Hierarchy: the most important element moves first. Supporting elements follow.
• Shared direction: elements should move in a consistent direction that matches the navigation (forward slides left, back slides right).
• Do not animate everything. One or two moving elements at a time is plenty.

---

Accessibility and Performance

• Respect the prefers-reduced-motion setting: replace slides and zooms with simple fades, or remove them.
• Avoid flashing content (more than three flashes per second can trigger seizures).
• Animate transform and opacity, which are cheap for the browser or phone to render, rather than width, height or top, which can stutter on budget Android devices.

---

Try It in the Lab

The easing curve visualizer lets you drag Bézier handles or pick presets and watch a ball, a card and a bottom sheet animate with your curve. Adjust the duration and stagger to see choreography in action, and copy the CSS for your engineers.