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.