Most product motion is bad. Not bad-looking, bad-feeling. It tells you the brand was assembled, not designed. Here are the five ways it goes wrong, and the rubric we use to keep ours from joining them.
Failure 1, Bouncy easings everywhere
Spring easings are great when something physical happens. A card lifts, an icon snaps into place, an alert lands. They're terrible when nothing physical is happening. Most product motion uses bouncy easings on everything because they're the default in motion libraries. They make the brand feel like a children's app.
Use spring for events. Use exponential for transitions. Don't mix.
Failure 2, Generic durations
Every motion in your product has a duration baked into the brand. Not literally, but as a feeling. Stripe's motion is fast and confident. Linear's is fast and quiet. Notion's is medium and friendly. Pick the duration of your brand and stick to it across the whole product. The most common mistake is letting different designers pick different durations across different surfaces.
Motion is type for time. If your typography is consistent and your motion isn't, your brand reads as half-finished.
Diya Krishnan
Failure 3, Decorative motion
If a motion doesn't communicate state, status, hierarchy, or response, it shouldn't be there. Decoration costs attention, and attention is the most expensive thing in your product. Every wobble, every floating illustration, every parallax that doesn't earn its keep is a tax on your user.
Failure 4, Inconsistent ease across surfaces
Onboarding uses one ease. Settings uses another. Marketing site uses a third. Everyone notices, even if they can't articulate it. Pick three eases for your whole product, typically: spring, exponential-out, exponential-inOut, and use them consistently.
Failure 5, Motion that fights the layout
If a card fades up at 32px and you put it next to a card that's already in place, the eye pulls toward the moving one and away from the static one. Motion changes the layout's centre of gravity. Designers who don't think about this end up with motion that reads as accidentally hostile to the page beneath it.
Our rubric, in one paragraph
Pick three eases. Pick one duration scale (we use 200ms / 400ms / 700ms). Use spring only for physical events. Cut every motion that doesn't communicate state. Watch the page's centre of gravity. Sit with the motion overnight before shipping. If it still feels right tomorrow morning, ship it.
