motion

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

2|Updated Nov 4, 2025

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

Ready to run

npx skills add https://github.com/kvngrf/flowsterix --skill motion-kvngrf

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Motion provides a comprehensive React animation toolkit for building polished UIs with gestures, scroll effects, and layout transitions, while maintaining performance.

Core Features & Use Cases

Gestures: drag, hover, tap, pan with cross-device support
Scroll & Layout Animations: parallax, whileInView, layoutId, and shared element transitions
SVG & Performance: path morphing, hardware-accelerated animations, LazyMotion for smaller bundles
Real-world use cases include modals, carousels, dashboards, and interactive components.

Quick Start

Install Motion via npm: npm i motion Import and use in a component: import { motion } from "motion/react" Create a simple animation: <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

Frequently Asked Questions about motion

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

FAQPage Schema

How do I add React animations for gestures and scroll effects?▼

Motion enables React UI animations by importing motion components from "motion/react" and applying initial, animate, and gesture props to elements like <motion.div> to handle drag, hover, and scroll interactions.

Does Motion work with Next.js App Router and TypeScript?▼

Motion supports Next.js App Router by enforcing client-side usage for interactive components, and provides TypeScript typings to safely configure animation properties and gesture handlers.

What is the best way to optimize React animation bundle size?▼

To optimize React animation bundle size, use LazyMotion to enable on-demand feature loading and hardware-accelerated animations, reducing the final JavaScript payload while maintaining polished layout transitions.

How do I create shared element transitions and layout animations in React?▼

You create shared element layout transitions in React by using Motion's layoutId property to animate components smoothly between different views, which is ideal for interactive modals, carousels, and dashboards.

Can I use drag and pan gestures for interactive UI components in React?▼

Motion provides cross-device support for drag, pan, hover, and tap gestures in React, allowing you to build interactive UI components like responsive carousels and onboarding flows with stable user interactions.

Are there limitations when using Motion for SVG path morphing in React?▼

Motion supports SVG path morphing and hardware-accelerated animations, but developers must enforce client-side rendering within Next.js App Router and utilize LazyMotion to prevent potential bundle size bloat.