Framer Motion makes React animations declarative and powerful. Here's how to use it effectively.
Basic Animations
Loading code block...
Variants
Loading code block...
Gestures
Loading code block...
AnimatePresence
Loading code block...
Layout Animations
Loading code block...
Scroll Animations
Loading code block...
Animation Controls
Loading code block...
Performance
Loading code block...
Best Practices
Performance:
✓ Use transform properties (x, y, scale, rotate)
✓ Avoid animating layout properties
✓ Use will-change sparingly
✓ Lazy load animation features
Accessibility:
✓ Respect prefers-reduced-motion
✓ Don't rely solely on animation for meaning
✓ Keep animations subtle
✓ Allow users to pause animations
Design:
✓ Keep animations short (200-500ms)
✓ Use appropriate easing
✓ Be consistent across the app
✓ Animation should enhance, not distract
Conclusion
Framer Motion provides powerful, declarative animations for React. Use variants for reusable animation states, AnimatePresence for exit animations, and layout animations for fluid UI changes. Always consider performance and accessibility when adding animations.