← Back to Motion & Animation

Small moments that provide immediate feedback, guide user behavior, and add delight to everyday interactions. These subtle animations create a responsive and engaging user experience.

Immediate

Provide instant feedback to user actions

Contextual

Relate directly to the user's action

Functional

Serve a clear purpose beyond decoration

Delightful

Add personality without overwhelming

Like Button

Feedback

Click to see the heart animation

Star Rating

Input

Hover and click to rate

Notification Badge

Indicator
3

Click to clear notifications

Download Progress

Action

Click to start download

Task Completion

Completion

Delete Action

Destructive
Document.pdf
Image.jpg
Archive.zip

Best Practices

  • • Keep interactions under 300ms for immediate feedback
  • • Use appropriate easing curves for different actions
  • • Provide visual feedback for every user interaction
  • • Consider the emotional context of the action
  • • Test on touch devices for proper touch feedback
  • • Ensure accessibility with focus states and alternatives

Common Patterns

  • • Hover: Scale, color, or shadow changes
  • • Click: Scale down then up, ripple effects
  • • Loading: Spinners, progress bars, skeleton screens
  • • Success: Checkmarks, color changes, celebrations
  • • Error: Shake animations, color feedback
  • • Delete: Slide out, fade, undo options

Performance

  • • Use CSS transforms for smooth animations
  • • Avoid animating layout properties
  • • Use requestAnimationFrame for JS animations
  • • Limit concurrent animations

Accessibility

  • • Respect prefers-reduced-motion
  • • Provide non-motion alternatives
  • • Ensure keyboard accessibility
  • • Use ARIA labels for screen readers

Testing

  • • Test on various devices and browsers
  • • Verify touch interactions work properly
  • • Check performance on slower devices
  • • Validate with accessibility tools