Motion That Doesn't Get in the Way

It's easy to add motion to a site. It's hard to add motion that still feels good on the tenth visit and doesn't stutter on a mid-range phone. Most interfaces get this backwards — big, showy transitions that impress once and annoy forever.

Motion has a job

Every animation should answer a question the user already has: Where did that come from? What just changed? Where am I now? If a transition isn't answering one of those, it's decoration — and decoration is the first thing to cut.

• Enter/exit motion should point to where an element comes from and goes to.
• Keep durations short — 200-400ms reads as responsive; a second reads as sluggish.
• Ease out, not linear. Things in the real world decelerate as they arrive.

Respect the machine and the person

The same animation that glides on a laptop can jank on a phone, because the expensive parts — layout, backdrop blur, box-shadow — recompute every frame. Animate transform and opacity; those the GPU handles almost for free. And always honor the user's own preference.

// Honor reduced-motion and coarse pointers: no parallax, no heavy blur.
const reduced =
  useReducedMotion() || useMediaQuery("(pointer: coarse)");

return (
  <motion.div
    initial={reduced ? false : { opacity: 0, y: 24 }}
    whileInView={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
  />
);

The best motion is the kind users never consciously notice — they just feel that the interface is calm, quick, and in control.

Restraint is the whole craft. A handful of intentional, GPU-friendly transitions will always beat a page that moves for the sake of moving.