Animation Examples

Interactive animation demos using Framer Motion. Smooth, performant animations for modern web applications.

Basic Animations

Fade In

Simple opacity transition

Slide Up

Slide from bottom with opacity

Scale In

Zoom effect with opacity

List Animations

Stagger Children

Sequential animation of child elements

Interactive Animations

Add/Remove Items

Animate items entering and leaving

Item 1
Item 2
Item 3

Number Counter

Animate number changes

0

Hover & Tap Effects

Hover Scale

Scale up on hover

Hover & Click

Hover Lift

Lift up with shadow

Lift Effect

Hover Rotate

Rotate on hover

Rotate

Hover Glow

Border glow effect

Border Glow

Modal Animation

Animated Modal

Modal with backdrop and content animations

Continuous Animations

Infinite Rotation

Continuously rotating element

Pulse Effect

Pulsing scale animation

•Live

Best Practices

Performance Tips
  • Use transform properties (scale, rotate, translate) for best performance
  • Avoid animating expensive properties like width, height, or box-shadow
  • Use layout prop for smooth position changes
  • Implement exit animations with AnimatePresence
  • Consider reduced motion preferences
Accessibility
  • Respect prefers-reduced-motion
  • Keep animations short (200-400ms)
  • Ensure focus indicators remain visible
  • Don't rely solely on animation to convey information
  • Test with keyboard navigation