framer-motion-best-practices

Optimize Framer Motion animations for 60fps by prioritizing GPU-friendly transforms over layout changes. This approach prevents layout thrashing and ensures smooth React animations.

Framer Motion causes jank and excessive re-renders when using layout properties instead of GPU-friendly transforms or when variants are unstable. Adopting motion-value patterns and stable variants prevents these React performance issues.

LazyMotion is a Framer Motion feature bundle that reduces React payload size by enabling domAnimation. It allows you to load animation features dynamically instead of including the entire motion library.

Handle gestures in Framer Motion by enforcing stable variants and motion-value patterns. This ensures your React animations remain interruptible and smooth during user interactions.

You can use Framer Motion for SVG animations without performance issues by following specific optimization patterns. These guidelines avoid jank and ensure smooth SVG animation rendering in React.

Use shared layout animations in Framer Motion when elements need to move seamlessly between different React UI components. Following specific layout animation guidelines prevents jank during these visual transitions.