animation-library-masterylisted

# Animation Library Mastery ## Purpose Select the right animation library for each use case and implement animations with correct spring parameters, accessibility handling, and GPU-optimized performance. Default to Motion for React web and Reanimated for React Native unless a specific use case demands an alternative. ## When to Use - Adding any animation or transition to a React component - Choosing between Motion, React Spring, GSAP, or CSS for a project - Implementing spring physics, layout animations, or scroll-driven effects - Configuring spring parameters for specific motion styles - Ensuring animations respect prefers-reduced-motion ## Examples **Example 1: Choosing a library for a dashboard** ``` User: "I need to animate card entrances and a sidebar toggle in my Next.js dashboard" Claude: [Uses animation-library-mastery] Recommends Motion for both: - Cards use variants with staggerChildren for entrance - Sidebar uses layout prop for smooth width transition - Wraps motion in useReducedMotion check ``` **Example 2: Complex scroll choreography** ``` User: "I want a hero section where elements pin and animate as the user scrolls" Claude: [Uses animation-library-mastery] Recommends GSAP ScrollTrigger: - Uses gsap.context() in useLayoutEffect for React cleanup - Configures timeline with scrub: 1 and pin: true - Adds prefers-reduced-motion media query fallback ``` **Example 3: Physics-based drag interaction** ``` User: "Make this card draggable with a springy snap-bac