motion

Name: motion
Availability: InStock
Author: Jack

Create declarative gesture-aware UI animations in React with Motion.

16|7|Updated Nov 20, 2025

Search Tags:#motion #framer-motion #parallax #gesture controls #react animations #layout animations

Ready to run

npx skills add https://github.com/jackspace/ClaudeSkillz --skill motion-jackspace

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill provides Production-ready Motion (Framer Motion) setup for React, offering gestures, scroll animations, layout transitions, and SVG animations to deliver engaging, accessible UI experiences.

Core Features & Use Cases

✅ Gestures: drag, hover, tap, pan with cross-device support
✅ Scroll animations and parallax effects
✅ Layout animations (FLIP) and shared element transitions
✅ SVG path morphing and shape animations
✅ Performance optimizations (LazyMotion, 2.3 KB to 34 KB bundles)

Quick Start

Install motion, create a basic React component with motion.div, and enable a simple drag or hover interaction.

Frequently Asked Questions about motion

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

FAQPage Schema

How do I add drag-and-drop interactions to React components?▼

Drag-and-drop interactions use Framer Motion's drag gesture API with motion.div and whileDrag states to detect mouse and touch events, enabling cross-device draggable lists, carousels, and modals without manual event handlers.

What's the best way to create scroll-based animations and parallax effects in React?▼

Scroll-based animations synchronize element motion to viewport scroll position using scroll timeline integration and whileInView states, delivering parallax effects and reveal animations that trigger as users scroll through hero sections and long-form layouts.

Can I animate layout changes and shared element transitions without rewriting my component tree?▼

Layout animations use the FLIP technique to smoothly transition elements when their positions change, while shared element transitions move visual identity across page or route changes without disrupting the DOM structure.

How do I keep animation bundles small while using advanced motion features?▼

LazyMotion loads motion features on demand, reducing bundle size from 34 KB to 2.3 KB by splitting core gestures and advanced effects, letting you ship only the animation capabilities your app actually uses.

Does Framer Motion support SVG animations and path morphing?▼

SVG path morphing animates shape transformations between different paths and applies gesture controls like hover and tap to individual SVG elements, enabling interactive icons, logos, and data visualizations.

What's the performance impact of adding gestures and animations to a production React app?▼

Performance optimizations through LazyMotion, hardware acceleration, and gesture state management (whileHover, whileTap, drag) keep animations smooth on mobile and desktop without blocking user interactions or rendering.