Microinteraction Timing Generator

Why Animation Timing Matters in UX

Animation timing is not decoration – it's communication. The duration of a transition tells users whether something is important or incidental, near or far, reversible or permanent. A modal that appears in 80ms feels like a bug. The same modal at 250ms feels intentional. At 600ms it feels sluggish. The difference between these three experiences is 170ms and 350ms – values most designers never consciously choose.

The easing curve matters as much as duration. Ease-out (fast start, slow finish) is the most natural curve for appearing elements – it mimics objects decelerating as they arrive, the way a ball rolls to a stop. Ease-in (slow start, fast finish) is natural for exits – objects accelerate as they move away. Linear easing feels mechanical and robotic for physical metaphors, but works well for continuous animations like loading spinners. Using the wrong easing – even at the right duration – makes an animation feel off in a way users sense but can't explain.

The 100ms threshold is the most important number in microinteraction design. Research by Nielsen Norman Group shows that users perceive feedback as "instant" if it happens within 100ms of their action. Between 100ms and 1000ms, users notice a delay but stay engaged. Beyond 1000ms, they expect a progress indicator. This means button feedback, hover states, and toggle switches must respond within 100ms to feel like direct manipulation rather than request-response. Modals, page transitions, and complex state changes have more budget – but the principle holds: every frame of animation should serve a purpose, not just fill time.