motion

Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.

Installation

npx claude-plugins install @secondsky/claude-skills/motion

Contents

Folders: skills

Files: README.md

Documentation

Status: Production Ready ✅ Last Updated: 2025-11-07 Production Tested: React 19 + Next.js 15 + Vite 6 + Tailwind v4

Auto-Trigger Keywords

Claude Code automatically discovers this skill when you mention:

Primary Keywords

• motion
• framer-motion
• framer motion
• react animation
• react animations
• javascript animation
• vite react animation
• nextjs animation
• animation library
• declarative animations

Feature Keywords (Gestures)

• gestures
• drag
• drag and drop
• draggable
• hover animation
• hover state
• tap animation
• tap gesture
• pan gesture
• whileHover
• whileTap
• whileDrag
• drag constraints

Feature Keywords (Scroll)

• scroll animation
• scroll animations
• scroll-based animation
• scroll-linked animation
• parallax
• parallax effect
• scroll progress
• scroll trigger
• scroll-triggered
• whileInView
• useScroll
• scroll indicator

Feature Keywords (Layout)

• layout animation
• layout animations
• FLIP animation
• shared element
• shared element transition
• card expansion
• card expand
• expand collapse
• magic move
• layoutId
• LayoutGroup

Feature Keywords (SVG)

• SVG animation
• SVG path
• path morphing
• line drawing
• path animation
• pathLength
• svg line
• draw SVG

Feature Keywords (Physics)

• spring physics
• spring animation
• bounce animation
• natural motion
• physics-based
• stiffness
• damping

Component Keywords

• modal animation
• dialog animation
• accordion animation
• carousel animation
• slider animation
• tabs animation
• dropdown animation
• toast animation
• notification animation
• hero section animation
• page transition
• route transition

Integration Keywords

• tailwind animation
• shadcn animation
• radix animation
• next.js app router animation
• server components animation
• vite plugin animation
• typescript animation

Problem Keywords

• AnimatePresence not working
• AnimatePresence exit not working
• layout animation bug
• scroll animation performance
• reduced motion
• prefers-reduced-motion
• bundle size optimization
• large bundle size
• animation performance
• janky animations
• stuttering animations

Error-Based Keywords

• “motion is not defined”
• “Cannot find module motion”
• “AnimatePresence children must have key”
• “window is not defined motion”
• “useEffect is not defined”
• “Next.js motion error”
• “Cloudflare Workers motion”
• “build error motion”

Use Case Keywords

• hero parallax
• landing page animation
• scroll reveal
• fade in on scroll
• stagger animation
• staggered list
• drag to reorder
• sortable list
• image gallery animation
• product carousel
• modal popup
• animated menu
• smooth scroll

Comparison Keywords

• motion vs auto-animate
• framer motion alternative
• motion vs framer
• animation library comparison
• best react animation
• lightweight animation
• motion bundle size

Migration Keywords

• migrate to motion
• upgrade framer motion
• replace framer motion
• motion migration
• animation library switch

What This Skill Does

Production-ready setup for Motion (formerly Framer Motion) - the industry-standard React animation library with 30,200+ GitHub stars. Motion provides declarative animations, gesture controls, scroll effects, spring physics, layout animations, and SVG manipulation.

Core Capabilities

✅ Gesture Controls - drag, hover, tap, pan, focus with cross-device support ✅ Scroll Animations - viewport-triggered, scroll-linked, parallax with ScrollTimeline API ✅ Layout Animations - FLIP technique, shared element transitions with layoutId ✅ Spring Physics - Natural, customizable physics-based motion ✅ SVG Animations - Path morphing, line drawing, attribute animation ✅ Exit Animations - AnimatePresence for smooth unmounting transitions ✅ Bundle Optimization - 2.3 KB (mini) to 34 KB (full), optimizable to 4.6 KB with LazyMotion ✅ 29+ Documented Issues Prevented - AnimatePresence, layout, performance, Next.js, Cloudflare ✅ 5 Production Templates - Vite, Next.js, scroll, UI components, layout transitions ✅ 4 Reference Guides - vs AutoAnimate, performance, Next.js, common patterns ✅ 2 Automation Scripts - One-command setup, bundle optimizer

When to Use This Skill

✅ Use Motion When:

Complex Interactions:

• Drag-and-drop interfaces (sortable lists, kanban boards)
• Hover states with scale/rotation/color changes
• Tap feedback with bounce/squeeze effects

Scroll-Based Animations:

• Hero sections with parallax layers
• Scroll-triggered reveals (fade in as elements enter viewport)
• Progress bars linked to scroll position

Layout Transitions:

• Shared element transitions between routes (card → detail page)
• Expand/collapse with automatic height animation
• Grid/list view switching

Advanced Features:

• SVG line drawing, path morphing
• Spring physics for natural bounce
• Orchestrated sequences (staggered reveals)

❌ Don’t Use Motion When:

Simple List Animations →

Included Skills

This plugin includes 1 skill definition:

motion

Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.

Source

View on GitHub