motion

Create declarative Motion animations for React components with gestures, scroll effects, and layout transitions.

961|99|Updated Oct 20, 2025

Search Tags:#performance #framer-motion #react animation #gestures #scroll effects #svg animation #layout transitions

Ready to run

npx skills add https://github.com/jezweb/claude-skills --skill motion

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/jezweb/claude-skills/tree/main/skills/motion
Command: npx skills add https://github.com/jezweb/claude-skills --skill motion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill eliminates the complexity of implementing advanced React animations, saving developers hours of debugging and configuration work while delivering professional motion experiences.

Core Features & Use Cases

Gesture Controls: Automate drag-and-drop interfaces, hover states, and tap feedback with cross-device support.
Scroll & Layout Animations: Create parallax effects, scroll-triggered reveals, and smooth layout transitions.
Use Case: Imagine you need to create a sortable kanban board with drag gestures, a hero section with scroll-linked animations, and shared element transitions between pages.

Quick Start

Use the motion skill to create a draggable carousel component with momentum and constraints for your e-commerce product showcase.

Bundle Optimization

LazyMotion: Reduce bundle size from 34 KB to 4.6 KB while maintaining most animation capabilities.

Frequently Asked Questions about motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create drag-and-drop interactions in React without building gesture logic from scratch?▼

Framer Motion handles drag gestures declaratively through drag props on components, automatically managing momentum, constraints, and cross-device support. Combine with layout animations to create sortable interfaces and draggable kanban boards without manual event handling.

Can I add scroll-triggered animations and parallax effects to React components?▼

Yes. Framer Motion's scroll-linked animations and parallax effects respond to scroll position, enabling reveals, staggered animations, and depth effects on hero sections and content-heavy pages without calculating scroll offsets manually.

What's the best way to optimize bundle size when using React animations?▼

LazyMotion and useAnimate mini reduce Framer Motion's footprint from 34 KB to 4.6 KB by loading animation features on demand, preserving gesture controls and scroll effects while cutting overhead for performance-sensitive builds.

How do I implement smooth layout transitions and shared element animations between pages in Next.js?▼

Framer Motion's layout prop and AnimatePresence handle FLIP-based transitions and shared element animations across Next.js app and pages routing, supporting client-only execution and TypeScript for seamless page-to-page motion.

Does Framer Motion work with SVG animations and modal transitions in React 18+?▼

Yes. Framer Motion supports SVG path animations, morphing, and modal/page transitions with AnimatePresence in React 18+ ecosystems including Next.js and Vite, with full TypeScript support and gesture integration.

What are the limitations when combining hover states, tap feedback, and layout animations together?▼

Framer Motion handles combined gesture states well, but performance degrades with excessive nested animations on low-end devices. Use LazyMotion to reduce overhead and test on mobile to catch jank from over-orchestration of drag, hover, and layout changes simultaneously.