What Are Micro-Interactions?
Micro-interactions are small, contained animations or visual responses that occur when a user interacts with an interface element. A button that subtly scales down when pressed, a toggle switch that smoothly slides between states, a checkmark that draws itself when a task is completed — these are micro-interactions.
They serve four purposes: provide feedback (the system received your input), indicate status (loading, success, error), guide attention (look here next), and add delight (make the experience feel polished).
Button Feedback
Buttons without feedback feel broken. Users need immediate confirmation that their tap or click registered.
Essential Button States
Hover: Subtle background color change or shadow increase. Tells the user "this is clickable." Active/Pressed: Scale down slightly (scale 0.97) or change background color. Confirms the press was registered. Loading: Replace button text with a spinner or loading animation. Disable the button to prevent double submissions. Success: Brief green checkmark animation after a successful action. Provides closure. Error: Brief shake animation with red color flash. Immediately communicates failure. Implementation Tips
Keep button transitions under 200ms — anything longer feels sluggish Use CSS transitions for simple state changes (hover, active) Use Framer Motion for more complex sequences (loading → success with checkmark draw) Always include a disabled state that prevents interaction during loading Loading States
Loading states fill the gap between action and result. Without them, users wonder if anything is happening.
Skeleton Screens
Replace loading spinners with skeleton screens — placeholder shapes that match the layout of the content being loaded:
Skeleton screens feel 15-20% faster than spinners in user perception studies Use a subtle shimmer animation (a gradient moving across the skeleton) to indicate activity Match the skeleton layout to the actual content layout — different widths for headings vs. body text In React, libraries like `react-loading-skeleton` provide ready-made components Progress Indicators
For operations that take more than 2-3 seconds, show progress:
Determinate progress: When you know how long the operation will take (file upload, data import), show a percentage bar Indeterminate progress: When duration is unknown, use a spinner or animated dots Step indicators: For multi-step processes, show "Step 2 of 4" with completed steps checked off Form Validation Animations
Form validation is where micro-interactions have the most practical impact:
Real-Time Validation
Success indicator: A green checkmark that fades in next to valid fields. Users know they can move on. Error shake: A horizontal shake animation on fields with errors. The shake draws attention without being aggressive. Character count: Animate the character count color from green to yellow to red as the user approaches the limit. Password strength: An animated progress bar that fills and changes color as the password becomes stronger. Error Message Animation
Error messages should not simply appear — they should animate in to draw attention:
Slide down from the input field with a subtle spring animation Use red color with appropriate contrast for accessibility Animate out when the error is corrected (do not leave stale error messages) Scroll-Triggered Animations
Content that animates into view as the user scrolls creates a dynamic, engaging experience:
Best Practices
Fade up: Elements fade in and translate up 20-30px as they enter the viewport. The most common and least distracting scroll animation. Stagger: When multiple elements enter together (a grid of cards), stagger their animations by 50-100ms each. Creates a cascade effect. Trigger once: Animate elements only the first time they enter the viewport, not every time the user scrolls past. Repeated animations are annoying. Respect reduced motion: Users who set "prefers-reduced-motion: reduce" in their OS settings should not see scroll animations. Check this preference and disable animations for these users. Framer Motion Examples
Framer Motion is the most popular animation library for React. Key concepts:
`animate` prop: Define the target animation state. `<motion.div animate={{ opacity: 1, y: 0 }}>` `initial` prop: The starting state before animation begins. `initial={{ opacity: 0, y: 20 }}` `transition` prop: Control duration, easing, and type. `transition={{ duration: 0.3, ease: "easeOut" }}` `whileHover` and `whileTap`: Interactive animations. `whileHover={{ scale: 1.05 }}` and `whileTap={{ scale: 0.95 }}` `AnimatePresence`: Animate elements when they are added to or removed from the DOM. Essential for modals, toasts, and conditional content. Layout animations: The `layout` prop automatically animates layout changes. Add or remove items from a list and they animate smoothly into place. Performance Considerations
Animations that cause layout recalculations (changing width, height, margin, padding) are expensive and can cause jank. Follow these rules:
Only animate transform and opacity: These properties are GPU-accelerated and do not trigger layout recalculations. Use `translateX/Y` instead of `left/top`, `scale` instead of `width/height`. Use `will-change` sparingly: `will-change: transform` tells the browser to prepare for animation, but applying it to too many elements wastes GPU memory. Reduce animation on low-power devices: Check `prefers-reduced-motion` and provide a reduced or no-animation experience. Test on real devices: Animations that run smoothly on a MacBook Pro may stutter on a mid-range Android phone. Test on the devices your users actually have. Avoid animating during scroll: Scroll-triggered animations should be simple (opacity + transform). Complex animations during scroll cause frame drops. Micro-interactions are the difference between a functional interface and a delightful one. Start with feedback and loading states, then layer in delight. Need help designing micro-interactions for your product? Contact us.