skills.rest
notbozho
notbozhoCOMMUNITY
Explore all skills by this author →
𝕏@0xBozhoGitHub

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
One-click install
npx skills add https://github.com/notbozho/defi-lending-dashboard --skill motion-notbozho
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
codethreadcodethread

lang-react

Move complex logic from React components into external Zustand, XState, or TanStack Query stores.

Community
Advanced
DITEKmaxDITEKmax

motion

Provides declarative React animations including gestures, scroll effects, and layout transitions.

Community
Advanced
marktantongcomarktantongco

Motion Animation Engineer

Create declarative UI animations for React components using Motion v12.

Community
Advanced
theexperiencecompanytheexperiencecompany
261

motion

Create declarative animations in React with gestures and scroll effects.

Official
Intermediate