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

Ready to run

npx skills add https://github.com/JoaquimCassano/ideas-marketplace --skill motion-joaquimcassano

💬 Prompt for ChatGPT / Claude Chat▼

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.