Framer Motion

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

Quick Reference

1. Bundle Optimization (CRITICAL)

• bundle-lazy-motion [blocked] - Use LazyMotion and m component instead of motion
• bundle-dynamic-features [blocked] - Dynamically import motion features
• bundle-dom-animation [blocked] - Use domAnimation for basic animations
• bundle-use-animate-mini [blocked] - Use mini useAnimate for simple cases
• bundle-strict-mode [blocked] - Enable strict mode to catch accidental imports

2. Re-render Prevention (CRITICAL)

• rerender-motion-value [blocked] - Use useMotionValue instead of useState
• rerender-use-transform [blocked] - Derive values with useTransform
• rerender-stable-callbacks [blocked] - Keep animation callbacks stable
• rerender-variants-object [blocked] - Define variants outside component
• rerender-animate-prop [blocked] - Use stable animate values
• rerender-motion-value-event [blocked] - Use motion value events

3. Animation Properties (HIGH)

• anim-transform-properties [blocked] - Animate transform properties
• anim-opacity-filter [blocked] - Prefer opacity and filter for visual effects
• anim-hardware-acceleration [blocked] - Leverage hardware acceleration
• anim-will-change [blocked] - Use willChange prop judiciously
• anim-independent-transforms [blocked] - Animate transforms independently
• anim-keyframes-array [blocked] - Use keyframe arrays for sequences

4. Layout Animations (HIGH)

• layout-dependency [blocked] - Use layoutDependency to limit measurements
• layout-position-size [blocked] - Use layout="position" or "size" appropriately
• layout-group [blocked] - Group related layout animations
• layout-id-shared [blocked] - Use layoutId for shared element transitions
• layout-scroll [blocked] - Add layoutScroll to scrollable ancestors

5. Scroll Animations (MEDIUM-HIGH)

• scroll-use-scroll [blocked] - Use useScroll hook for scroll-linked animations
• scroll-use-spring-smooth [blocked] - Smooth scroll animations with useSpring
• scroll-element-tracking [blocked] - Track specific elements entering viewport
• scroll-offset-configuration [blocked] - Configure scroll offsets
• scroll-container-ref [blocked] - Track scroll within specific containers

6. Gesture Optimization (MEDIUM)

• gesture-while-props [blocked] - Use whileHover/whileTap instead of handlers
• gesture-variants-flow [blocked] - Let gesture variants flow to children
• gesture-drag-constraints [blocked] - Use dragConstraints ref for boundaries
• gesture-drag-elastic [blocked] - Configure dragElastic for natural feel
• gesture-tap-cancel [blocked] - Use onTapCancel for interrupted gestures

7. Spring & Physics (MEDIUM)

• spring-physics-based [blocked] - Use physics-based springs for interruptibility
• spring-damping-ratio [blocked] - Configure damping to control oscillation
• spring-mass-inertia [blocked] - Adjust mass for heavier/lighter feel
• spring-use-spring-hook [blocked] - Use useSpring for reactive values

8. SVG & Path Animations (LOW-MEDIUM)

• svg-path-length [blocked] - Use pathLength for line drawing animations
• svg-motion-components [blocked] - Use motion.path and motion.circle
• svg-viewbox-animation [blocked] - Animate viewBox for zoom effects
• svg-morph-matching-points [blocked] - Match point counts for morphing

9. Exit Animations (LOW)

• exit-animate-presence [blocked] - Wrap conditional renders with AnimatePresence
• exit-unique-keys [blocked] - Provide unique keys for AnimatePresence children
• exit-mode-wait [blocked] - Use mode="wait" for sequential transitions

How to Use

Read individual reference files for detailed explanations and code examples:

• Section definitions [blocked] - Category structure and impact levels
• Rule template [blocked] - Template for adding new rules

Reference Files