framer-motion

Optimize Framer Motion animations in React by enforcing GPU-accelerated properties and isolating motion values to prevent re-renders. This skill delivers 42 rules across 9 categories to eliminate unnecessary React re-renders and maintain smooth 60fps experiences.

The best way to reduce Framer Motion bundle size is applying bundle-lazy-motion patterns. This skill provides correct code examples and categorized rules for bundle optimization, ensuring you ship smaller production applications without sacrificing animation capabilities.

Framer Motion layout animations cause janky frame rates when using non-GPU-accelerated properties or triggering unnecessary re-renders. This skill identifies incorrect code patterns and enforces GPU-accelerated properties to maintain smooth 60fps during layout transitions.

Yes, you can use this skill to review and refactor existing React animation code. It supports development, review, and refactoring tasks by providing incorrect and correct code patterns with detailed explanations for refactoring animation-heavy components.

Yes, you need React and Framer Motion expertise to implement these animation performance rules. The 42 prioritized rules include code examples requiring foundational framework knowledge to effectively apply bundle optimization and re-render prevention techniques.

To optimize scroll-linked effects and SVG animations with Framer Motion, apply the medium and low impact rules provided here. These rules cover scroll animations and SVG animations with correct code patterns to maintain performance and reduce frame drops.