framer-motion-best-practices

What it does

This skill equips AI agents to implement high-performance, production-ready animations using Framer Motion. It ensures code adheres to best practices for maintainability and efficiency within React applications.

When to use it

• Building complex UI interactions like staggered list reveals or conditional layout shifts.
• Optimizing animation performance on low-end devices by managing layout thrashing.
• Creating accessible motion sequences that respect user preferences for reduced movement.
• Developing reusable animation components across a large-scale frontend codebase.

Key capabilities

• Layout Transitions: Smoothly handle DOM changes without visual jank using layout and layoutId.
• Performance Optimization: Automatically skip unnecessary renders and minimize reflows.
• Accessibility Integration: Generate ARIA attributes and manage focus states during animations.
• Composability: Chain multiple animations together using the AnimatePresence component.

Example prompts

• "Create a modal that fades in and slides up with a staggered effect for child elements."
• "Optimize this list of items to animate smoothly when new data is appended without causing layout shifts."
• "Implement an accessible accordion where opening a panel triggers a smooth height transition."

Tips & gotchas

Ensure you are using the latest version of Framer Motion to leverage all performance optimizations. Avoid animating properties that trigger expensive browser recalculations, such as width or height, unless utilizing specific layout features designed for them.