What Are Micro-Interactions?
Micro-interactions are small, contained moments of animation and feedback that respond to user actions. A heart icon that fills with color and bounces when tapped. A toggle switch that slides smoothly with a color transition. A pull-to-refresh indicator that morphs into a loading spinner. These tiny details separate apps that feel "good" from apps that feel "great."
The concept follows four parts: a trigger (user action or system event), rules (what happens), feedback (how the user perceives it), and loops (what happens over time or in different states).
Why They Matter
Users process visual motion far faster than text. A well-designed animation communicates state changes, provides feedback, and guides attention in milliseconds. Without animation, state changes feel abrupt and disorienting. With too much animation, the interface feels slow. The goal is not to look cool but to make the interface feel natural and responsive.
The Timing Rulebook
Animation timing is the single most important factor in whether motion feels right:
| Duration | Use Case | Example |
|---|---|---|
| 50-100ms | Instant feedback | Button press highlight |
| 100-200ms | Simple state change | Toggle, checkbox, icon swap |
| 200-300ms | Standard transition | Page slide, sheet appear, card expand |
| 300-500ms | Complex transition | Layout rearrangement, shared element |
| 500ms+ | Elaborate animation | Onboarding, celebratory moments |
When unsure about duration, err on the shorter side. Users are more forgiving of slightly fast animations than sluggish ones.
Easing Functions
Linear animations (constant speed) feel robotic. Natural motion accelerates and decelerates:
- Ease-out (deceleration): Most common for entering elements. Fast start, gentle stop.
- Ease-in (acceleration): For leaving elements. Slow start, fast exit.
- Ease-in-out: For movement within the screen. Smooth both ways.
- Spring/bounce: For playful, physical interactions. Pull-to-refresh, toggles, drag landing. Both platforms have spring animation APIs.
Essential Patterns
Button feedback: Scale to 95-97% on press, return to 100% on release. Background color shifts. Optional light haptic. Duration: 50ms press, 100ms release.
Like animation: Outline to filled icon, scale to 120% then back with spring curve, color change, optional particle burst, haptic. Total: 300-400ms.
Pull-to-refresh: Indicator follows finger, snap with haptic at threshold, morph to loading animation, smooth retract on completion.
Swipe-to-delete: Row follows finger, red background revealed, past threshold the action icon grows, release triggers row height animation to zero with items sliding up.
Shared element transition: Thumbnail "flies" from list to detail hero position. Other elements fade around it. Creates visual continuity between screens.
Platform Animation APIs
iOS: UIView.animate for basic animations, UIViewPropertyAnimator for interruptible ones, Core Animation for layer-level effects, SwiftUI .animation() and withAnimation() for declarative motion, .spring(duration:bounce:) for physical curves.
Android: Compose Animate*AsState for simple state-driven animation, AnimatedVisibility for enter/exit, updateTransition for multi-property changes, Animatable for custom curves, MotionLayout for complex XML transitions.
Cross-platform: Lottie exports After Effects animations as JSON for all platforms. Rive provides interactive animations with state machines. React Native Reanimated runs animations on the UI thread for performance.
Performance
Animations must hit 60fps (120fps on ProMotion displays). Animate only transform and opacity when possible as these are GPU-composited. Avoid animating layout properties like width and height. Reduce overlapping animated layers. Profile with Instruments (iOS) or GPU rendering profiler (Android) to catch dropped frames.
When Not to Animate
Skip animation when the user has "Reduce Motion" enabled in accessibility settings (check UIAccessibility.isReduceMotionEnabled on iOS). Do not animate during data entry, informational content users need to read, when it would delay task completion, or in lists with hundreds of items (animate only on first appear).