motion

Overview

The Motion skill provides comprehensive guidance for building React animations with Motion (formerly Framer Motion), the industry-standard React animation library with 30,200+ GitHub stars. It covers gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG path morphing, and exit animations with AnimatePresence, along with bundle optimization strategies ranging from 2.3 KB to 34 KB.

Key Features

• Gesture Support - Complete guidance for implementing drag-and-drop, hover states, tap feedback, and pan gestures with cross-device support
• Scroll-Based Animations - Instructions for viewport-triggered reveals, scroll-linked progress bars, parallax layers, and sticky header transforms
• Layout Transitions - FLIP-technique animations for shared element transitions, expand/collapse, grid/list switching, and tab navigation
• Bundle Optimization - Strategies for reducing bundle size from 34 KB to 2.3 KB using useAnimate mini or 4.6 KB with LazyMotion
• Framework Compatibility - Production-tested with React 19.2, Next.js 16.1, Vite 7.3, and Tailwind v4, including guidance on when to use Motion vs lighter alternatives like auto-animate

Who is this for?

This skill is for React developers who need to implement sophisticated animations including drag-and-drop interfaces, scroll-triggered effects, shared element transitions, or SVG animations. It helps developers choose the right animation approach and provides clear guidance on when Motion is the appropriate tool versus simpler alternatives.