Motion Design That Converts
Animation should guide attention, not distract. Performance-first, accessible motion design patterns for modern web.
Motion is the most powerful and most abused tool in web design. Used well, it guides attention, communicates hierarchy, and creates emotional resonance. Used poorly, it slows pages, triggers accessibility issues, and distracts from the message.
The ALO Motion Principles
- Transform and opacity only — Never animate layout properties (width, height, padding, margin). They trigger expensive browser reflows.
- 300ms default, 500ms max — If your animation takes longer than half a second, it is not guiding attention — it is demanding it.
- Always check useReducedMotion — Some users experience motion sickness. Respecting their preference is not optional.
- One easing curve — cubic-bezier(0.22, 0.61, 0.36, 1). Consistency in motion is as important as consistency in color.
- No parallax, no decorative glows, no bounce — These are engagement theater. They feel impressive in a portfolio but hurt conversion in production.
Motion That Earns Its Place
Every animation in our system must answer one question: does this help the user understand where they are and what to do next? If the answer is no, the animation does not ship. Staggered reveals communicate hierarchy. Fade-up transitions communicate entrance. Exit animations communicate departure. Everything else is noise.
The best motion design is the kind users never notice — it just makes the experience feel right.