Framer Motion

This skill provides expert guidelines for creating performant animations using Motion (the renamed Framer Motion library) in React applications. It covers core principles like importing from the correct package, hardware acceleration best practices, and performance optimization techniques. The skill includes practical patterns for gesture animations, scroll-linked animations, exit animations with AnimatePresence, and staggered list effects. It emphasizes animating only GPU-accelerated properties like transform and opacity while respecting user accessibility preferences through reduced motion detection. Developers learn how to use variants for complex animations, implement spring transitions for natural motion, and debug performance issues to achieve smooth 60fps animations.

Install with the command provided to integrate this skill into your environment.