Implements fluid, high-performance Framer Motion animations for React applications, including gestures, scroll triggers, and exit transitions.
This skill equips Claude with specialized knowledge for building interactive user interfaces using the Framer Motion library. It streamlines the implementation of production-grade animations such as spring-based transitions, hover and tap gestures, and scroll-activated effects while strictly adhering to GPU-accelerated performance best practices. By providing Claude with specific guidance on entrance/exit states and layout-safe properties, it helps developers create polished, motion-rich web experiences without common pitfalls like layout thrashing or complex state management issues.
주요 기능
01Implement interactive gestures including hover, tap, and drag effects
02Optimization for GPU-accelerated properties like transform and opacity
03Convert standard elements into high-performance motion components
04Configure complex entrance and exit animations with AnimatePresence
05Execute scroll-triggered animations using viewport-aware triggers
060 GitHub stars
사용 사례
01Creating dynamic page transitions and modal entrance/exit effects
02Adding polished micro-interactions to buttons and navigation menus
03Building engaging landing pages with scroll-revealed content sections
