Motion Design That Converts
Most animation on the web is engagement theater — impressive in a portfolio, harmful in production. Here are the motion principles that actually convert.
We have audited dozens of sites where the animation budget exceeded the content budget. Parallax on every section, decorative glows pulsing for no reason, bounce effects on elements nobody clicks. The Lighthouse score tells the story: 43. Motion should earn its place on the page the same way copy does — by serving a purpose.
Five Rules We Ship By
- Transform and opacity only — Layout properties (width, height, padding) trigger reflows. Transform and opacity are GPU-composited. The difference is 60fps vs. jank.
- 300ms default, 500ms ceiling — Anything longer is not guiding attention, it is demanding it. Users do not wait for your animation to finish.
- Respect prefers-reduced-motion — Some users experience vestibular disorders. This is not optional accessibility theater. It is a medical accommodation.
- One easing curve, everywhere — Consistency in motion matters as much as consistency in color. Pick one curve and commit.
- Earn the animation — If it does not help the user understand where they are or what to do next, it does not ship. Stagger communicates hierarchy. Fade communicates entrance. Parallax on a testimonial section communicates nothing.
The Audit Question
Before shipping any animation, ask: "If I removed this, would the user be confused about what to do?" If the answer is no, remove it. Staggered reveals communicate hierarchy — keep those. Entry fades communicate arrival — keep those. A bouncing icon on a button nobody clicks? That is decoration pretending to be design.
Good motion design is invisible. The user does not think "nice animation." They think "this feels right." If they notice the animation, it is already too much.