2 min readmotiondesign

Motion is a language.


title: "Motion is a language." date: "2026-04-22" excerpt: "Notes on easing curves, micro-interactions, and why most product motion still feels like it was bolted on at the end." tags: ["motion", "design"] author: "Osys" cover: "linear-gradient(135deg, #A777FF 0%, #E879F9 100%)"

There are two kinds of product motion. The kind that says something, and the kind that says nothing.

The kind that says nothing is everywhere. A button that fades in over 200ms. A modal that slides up from the bottom with no apparent reason. A toast that shimmies. These are motion-shaped objects. They animate. They don't speak.

What motion can say

Motion can say:

  • Where you came from. A panel that slides out from behind a button you just clicked tells you which button birthed it.
  • What is hierarchically attached to what. A spring-tethered draggable card sits in a different family than the page beneath it.
  • What's important. A 600ms reveal of a headline tells you to read it. A 200ms reveal of a footer link tells you not to.
  • How fast the system is. Latency feels longer when motion drags, and shorter when motion lands cleanly.

These aren't decorative properties. They are syntactic ones.

The easing curve is the verb

Linear says "machinery." ease-out says "arrived." ease-in-out says "considered the trip." A custom cubic bezier with a sharp tail and a slow landing says "I am being deliberate, please notice."

We default to cubic-bezier(0.22, 1, 0.36, 1) on Osys projects. It is the "land with confidence" curve — fast initial movement, decelerating slowly into the resting state. Almost every reveal you've ever loved on a portfolio site uses something close to it.

Easing is the part of motion that nobody notices and everybody feels.

When to use no motion at all

A list that re-orders should not slide. It should jump, then settle, then quietly fade the new ordering into place. Motion that animates state changes the user requested usually feels insulting — it adds time to something the user just decided to do.

Use motion to discover, not to acknowledge.

A small test

Open any product you ship. Click around for 30 seconds. Count the animations. Ask, for each: what is this animation telling me that the static state didn't?

If the answer is "nothing," delete it.

The remaining ones — the ones that survive that test — those are the ones worth tuning.