Microinteractions are small animations and feedback. They make a site feel alive.
What they are
4 parts: trigger, rules, feedback, loops.
Examples
Hover, click, loading, validation, like, notification, scroll progress.
Why they matter
Feedback, UX, brand personality, engagement.
Hover
Darker, shadow, scale. 200ms.
Click
Scale 0.95, darker.
Loading
Spinner, progress bar, skeleton.
Success
Green check, scale-in.
Error
Shake, red border.
Scroll effects
Parallax, AOS, scroll-triggered. Don't overdo it.
Page transitions
Fade, slide. 200-400ms.
Notifications
Toast slide-in, 3-5s fade-out.
Timing
Quick 100-200ms. Medium 300-500. Slow 500-800.
Easing
Ease-out feels most natural.
CSS vs JS
CSS โ simple, GPU. JS โ complex.
Performance
Transform and opacity are GPU-friendly. Use will-change.
Accessibility
prefers-reduced-motion.
Mistakes
Too many animations, slow, auto-play, poor performance, no a11y.
Sayt.uz
Subtle microinteractions. Hover, validation, modal, notification, AOS. Dwell 4:30 (was 3:50).