🎬 Why Microinteraction Timing Matters
The moment a button is pressed, a modal opens, or a page transitions — these tiny animations are called microinteractions. If the duration is too short, they feel jarring; too long, and the interface feels sluggish. Most modern design systems break timing down into ranges from roughly 100ms to 400ms depending on the type of action.
This tool covers 12 common UI actions used in everyday product work — button clicks, hovers, modal open/close, page transitions, tooltips, accordions, dropdowns, loading spinners, toasts, drag and drop, and swipes — and recommends a duration and easing curve for each. As a general rule, frequent actions like clicks and hovers should stay under 100-200ms, while full-screen transitions can take 300-400ms for a smoother feel.
Pay attention to easing too. Elements that appear look more natural with ease-out (fast start, slow finish), while elements that disappear feel right with ease-in (slow start, fast finish). Looping animations like loading spinners work best with linear timing to keep a consistent, predictable rhythm.
Frequently Asked Questions
Animations over 400ms feel sluggish, especially for frequent interactions. Keep repeated actions like button clicks and hovers under 150ms so the interface feels responsive.
Linear motion feels mechanical. Ease-out gives a natural deceleration that suits elements appearing, while ease-in suits elements disappearing by accelerating out of view.
No. Timing should match how often and how significant the action is. Frequent actions like hover and click should be short, while full-screen transitions can be slightly longer.