Community Framer Motion Best Practices

Comprehensive performance optimization guide for Framer Motion animations in React applications. Contains 42 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

• Adding animations to React components with Framer Motion
• Optimizing bundle size for animation-heavy applications
• Preventing unnecessary re-renders during animations
• Implementing layout transitions or shared element animations
• Building scroll-linked or gesture-based interactions

Rule Categories by Priority