Micro Interactions Collection

Small interactive animations that enhance user experience

Material Design ripple effect

Bounce animation on click

Smooth checkmark animation

Circle draw animation

Badge bounce on update

Hamburger to X transformation

Expand/collapse indicator

Interactive star rating

Share menu expansion

Copied!

Visual confirmation feedback

Implementation Guide

Ripple Effect: Dynamically create and position ripple element on click
Heart Animation: Toggle class and use CSS animations for bounce effect
Checkboxes: Use custom styled elements with pseudo-elements for checkmarks
Success Indicators: Combine circle draw and checkmark animations with delays
Badges: Use scale transforms for attention-grabbing bounce
Menu Toggles: Transform hamburger bars using translate and rotate
Star Ratings: Track state and animate fill transitions
Share Menus: Stagger child element animations with delays
Feedback: Provide immediate visual confirmation for user actions
Performance: All animations use transform and opacity for GPU acceleration
Timing: Keep micro-interactions under 300-500ms for snappy feel
Accessibility: Ensure interactions work with keyboard and screen readers