Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.
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.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Bundle Optimization | CRITICAL | bundle- |
| 2 |
| Re-render Prevention |
| CRITICAL |
rerender- |
| 3 | Animation Properties | HIGH | anim- |
| 4 | Layout Animations | HIGH | layout- |
| 5 | Scroll Animations | MEDIUM-HIGH | scroll- |
| 6 | Gesture Optimization | MEDIUM | gesture- |
| 7 | Spring & Physics | MEDIUM | spring- |
| 8 | SVG & Path Animations | LOW-MEDIUM | svg- |
| 9 | Exit Animations | LOW | exit- |
bundle-lazy-motion - Use LazyMotion and m component instead of motionbundle-dynamic-features - Dynamically import motion featuresbundle-dom-animation - Use domAnimation for basic animationsbundle-use-animate-mini - Use mini useAnimate for simple casesbundle-strict-mode - Enable strict mode to catch accidental importsrerender-motion-value - Use useMotionValue instead of useStatererender-use-transform - Derive values with useTransformrerender-stable-callbacks - Keep animation callbacks stablererender-variants-object - Define variants outside componentrerender-animate-prop - Use stable animate valuesrerender-motion-value-event - Use motion value eventsanim-transform-properties - Animate transform propertiesanim-opacity-filter - Prefer opacity and filter for visual effectsanim-hardware-acceleration - Leverage hardware accelerationanim-will-change - Use willChange prop judiciouslyanim-independent-transforms - Animate transforms independentlyanim-keyframes-array - Use keyframe arrays for sequenceslayout-dependency - Use layoutDependency to limit measurementslayout-position-size - Use layout="position" or "size" appropriatelylayout-group - Group related layout animationslayout-id-shared - Use layoutId for shared element transitionslayout-scroll - Add layoutScroll to scrollable ancestorsscroll-use-scroll - Use useScroll hook for scroll-linked animationsscroll-use-spring-smooth - Smooth scroll animations with useSpringscroll-element-tracking - Track specific elements entering viewportscroll-offset-configuration - Configure scroll offsetsscroll-container-ref - Track scroll within specific containersgesture-while-props - Use whileHover/whileTap instead of handlersgesture-variants-flow - Let gesture variants flow to childrengesture-drag-constraints - Use dragConstraints ref for boundariesgesture-drag-elastic - Configure dragElastic for natural feelgesture-tap-cancel - Use onTapCancel for interrupted gesturesspring-physics-based - Use physics-based springs for interruptibilityspring-damping-ratio - Configure damping to control oscillationspring-mass-inertia - Adjust mass for heavier/lighter feelspring-use-spring-hook - Use useSpring for reactive valuessvg-path-length - Use pathLength for line drawing animationssvg-motion-components - Use motion.path and motion.circlesvg-viewbox-animation - Animate viewBox for zoom effectssvg-morph-matching-points - Match point counts for morphingexit-animate-presence - Wrap conditional renders with AnimatePresenceexit-unique-keys - Provide unique keys for AnimatePresence childrenexit-mode-wait - Use mode="wait" for sequential transitionsRead individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |