Skills

motion

Installation
Summary

React animation library with gestures, scroll effects, layout transitions, and spring physics.

  • Supports drag-and-drop, hover/tap feedback, scroll-triggered reveals, parallax, and FLIP layout animations with hardware acceleration
  • Three bundle options: 2.3 KB mini (useAnimate), 4.6 KB optimized (LazyMotion), or 34 KB full component library
  • Requires "use client" directive in Next.js App Router; works without modification in Pages Router and Vite
  • 35+ documented issues with solutions covering AnimatePresence exit animations, list performance, Tailwind conflicts, and layout edge cases
SKILL.md

Motion Animation Library

Overview

Motion (package: motion, formerly framer-motion) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

Key Capabilities:

  • Gestures: drag, hover, tap, pan, focus with cross-device support
  • Scroll Animations: viewport-triggered, scroll-linked, parallax effects
  • Layout Animations: FLIP technique for smooth layout changes, shared element transitions
  • Spring Physics: Natural, customizable motion with physics-based easing
  • SVG: Path morphing, line drawing, attribute animation
  • Exit Animations: AnimatePresence for unmounting transitions
  • Performance: Hardware-accelerated, ScrollTimeline API, bundle optimization (2.3 KB - 34 KB)

Production Tested: React 19.2, Next.js 16.1, Vite 7.3, Tailwind v4

Related skills

More from jezweb/claude-skills

Installs
785
Repository
jezweb/claude-skills
GitHub Stars
776
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass