Micro-interactions are the small moments of feedback that make users feel the product is alive and responsive. A button that resists then bounces on press, a success checkmark that draws itself, a form field that gently shakes when validation fails — these moments are remembered even when users can't articulate why they liked the experience.
The 4-Part Framework: Trigger → Rules → Feedback → Loops
Every micro-interaction has four parts. The trigger initiates it (a click, a scroll position, a state change). The rules define what happens. The feedback makes it visible. The loop or mode determines whether it repeats or what happens when conditions change.
How do you build micro-interactions with Framer Motion?
- Use spring physics (type: 'spring') for natural, organic movement.
- Stagger children animations to guide attention sequentially.
- layoutId for shared layout animations between route transitions.
- whileHover and whileTap for immediate, synchronous micro-feedback.
- AnimatePresence for mount/unmount animations — never abrupt element removal.
Do micro-interactions need a JavaScript animation library?
Often not. A library earns its bundle cost for orchestration — shared layout transitions, staggered sequences, presence animations on unmount. For a single element responding to a single event, CSS does it on the compositor with no JavaScript at all, and it keeps working while the page is still hydrating.
/* Compositor-only properties: no layout, no repaint. */
.btn {
transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); } /* the press "gives" */
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.field--invalid { animation: shake 180ms ease-in-out; }
/* The part that is skipped far too often. For a user with vestibular
sensitivity, decorative motion can cause real nausea — and the OS has
already told you their preference, so there is no excuse for guessing. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Note the invalid state still needs a non-motion signal — colour, an
icon, and a message — because with reduced motion the shake is gone
and motion was never sufficient on its own anyway. */Which CSS properties are safe to animate?
Only animate CSS properties that don't trigger layout: transform and opacity. Animating width, height, top, left causes layout thrash and janky 15fps animations. Use will-change sparingly — it consumes GPU memory. Test on a mid-range Android device, not your M3 MacBook.