skills.rest
JoaquimCassano
JoaquimCassanoCOMMUNITY
Explore all skills by this author →
Website𝕏@joaquimcassanoGitHub

motion

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

1|1|Updated Dec 29, 2025
Search Tags:#layout#react#motion#framer-motion#gestures#scroll
One-click install
npx skills add https://github.com/JoaquimCassano/ideas-marketplace --skill motion-joaquimcassano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/JoaquimCassano/ideas-marketplace/tree/main/.claude/skills/motion
Command: npx skills add https://github.com/JoaquimCassano/ideas-marketplace --skill motion-joaquimcassano

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Motion provides a declarative API to build rich, interactive animations in React without imperative code, simplifying complex gesture, scroll, and layout transitions.

Core Features & Use Cases

  • Gestures: drag, hover, tap, pan for responsive UI interactions
  • Scroll & parallax: scroll-triggered reveals, parallax hero sections
  • Layout & shared elements: FLIP, layoutId, and smooth route/content transitions
  • SVG & vector animations: path morphing and line drawing
  • Performance optimization: LazyMotion for on-demand features and smaller bundles

Quick Start

Install motion and start by wrapping your app with a MotionProvider, then replace HTML elements with motion components to add declarative animations.

Frequently Asked Questions about motion

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

FAQPage Schema
How do I create scroll-triggered reveals and parallax effects in React?▼

Scroll-triggered reveals and parallax effects in React are built declaratively using this Motion skill. It maps scroll progress to animation properties, enabling scroll-triggered UI interactions without imperative scroll event listeners.

Can I use declarative animations with Next.js App Router?▼

Yes, declarative animations work with Next.js App Router by importing from motion/react-client. This ensures components render correctly within the server-side rendering pipeline while maintaining interactive client-side animations.

What is the best way to animate layout transitions in React?▼

Layout transitions in React are best handled declaratively using FLIP techniques and shared layoutId. This skill automatically animates elements between positions during route or content changes, preventing visual jumps.

Do I need React 18 to build gesture interactions like drag and drop?▼

Yes, React 18 or higher is required to build gesture interactions like drag, hover, and tap. This prerequisite ensures compatibility with the underlying declarative animation engine and concurrent rendering features.

How do I reduce bundle size when adding vector and SVG path morphing?▼

Reduce bundle size during SVG path morphing by utilizing LazyMotion. It enables on-demand feature loading, splitting the animation library code to deliver smaller bundles for production React applications.

Related Skills

Explore More Software Engineering Skills→
dieu-donneedieu-donnee

react-expert

Architect React 18+ applications with server components and state management.

Community
Advanced
ataschzataschz
18

motion

Add gestures, layout transitions, and scroll-based effects to React UIs with Motion.

Community
Advanced
venom9833venom9833

vercel-react-view-transitions

Implement declarative UI state transitions in React and Next.js applications.

Community
Intermediate
Camilo8902Camilo8902

framer-motion-animator

Generate Framer Motion animations for web applications with page transitions and scroll effects.

Community
Intermediate