Implements production-grade React animations and interactive gestures using the Framer Motion library.
The Framer Motion skill equips Claude with specialized knowledge to build fluid, declarative animations within React applications. It provides expert guidance on creating smooth transitions, complex gesture recognitions like dragging and hovering, and sophisticated layout animations using shared element transitions. Whether you are building modal enter/exit sequences with AnimatePresence or orchestrating staggered child animations, this skill ensures optimal performance and accessibility, including built-in support for user-preferred reduced motion settings.
主要功能
01Seamless layout animations and shared element transitions via layoutId
02Built-in gesture support for advanced drag, hover, tap, and focus interactions
03Lifecycle animation management with AnimatePresence for mounting and unmounting
04Declarative animation syntax using motion components and reusable variants
05Physically-accurate spring, tween, and inertia transitions for realistic motion
069 GitHub stars
使用场景
01Building interactive UI components with polished hover states and tactile drag-and-drop feedback
02Developing complex, scroll-linked parallax effects and staggered list reveal animations
03Creating seamless page transitions and modal animations for modern web applications
