Back to Instructables

Micro-interactions Examples

Small, functional animations that provide feedback and enhance the user experience.

Common Patterns

Toggle Switch

Provides immediate visual feedback when changing a setting state. The slide animation connects the action to the result.

Like / Favorite

A "pop" animation rewards the user for their engagement and clearly indicates the active state.

Loading State

Replaces the button text with a spinner to show that the system is processing the request, preventing double clicks.

Principles

  • Feedback: Always acknowledge user input immediately.
  • Context: Animations should feel natural and connected to the element being interacted with.
  • Speed: Micro-interactions should be fast (typically 200-400ms) so they don't slow down the user.