motion

Provides React animations with gestures, scroll effects, and layout transitions.

Updated Oct 26, 2025

Search Tags:#layout #motion #framer-motion #gestures #scroll #react-animation

Ready to run

npx skills add https://github.com/notbozho/defi-lending-dashboard --skill motion-notbozho

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Motion simplifies building sophisticated React animations with a declarative API, gesture controls, scroll effects, and smooth layout transitions, enabling vibrant UIs without imperative DOM manipulation.

Core Features & Use Cases

Gestures: drag, hover, tap, pan with responsive feedback
Scroll animations and parallax effects
Layout transitions and shared element morphing
SVG animations (path morphing and line drawing)
Performance optimizations via LazyMotion for on-demand feature loading

Quick Start

Install motion and wrap your app with LazyMotion using domAnimation, then begin animating with the motion components.

Frequently Asked Questions about motion

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

FAQPage Schema

How do I build React animations with gesture controls like drag and tap?▼

React scroll animations and parallax effects are built using a declarative API that links component motion to scroll position, enabling vibrant UIs without manual DOM event listeners.

Can I use React layout transitions for shared element morphing in a component library?▼

Yes, you can implement React layout transitions for shared element morphing within component libraries, creating smooth visual transitions between UI states declaratively.

Do I need a specific React toolchain to set up LazyMotion for bundle size optimization?▼

You need a modern React toolchain like React 18 or 19 with Next.js or Vite to set up LazyMotion, which minimizes bundle size by loading animation features on demand.

What is the best way to animate SVG paths for line drawing effects in React?▼

The best way to animate SVG paths for line drawing in React is using a declarative animation library that supports path morphing, avoiding complex imperative DOM manipulation.

Why use a declarative API instead of imperative DOM manipulation for React animations?▼

Using a declarative API for React animations simplifies sophisticated workflows by directly mapping visual properties to component state, bypassing the complexity of imperative DOM manipulation.