skills.rest
kvngrf
kvngrfCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Software Engineering Skills→
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate
mattwoodcomattwoodco
3

motion

Create declarative animations and transitions in React and Next.js with Framer Motion.

Community
Intermediate
Aayush31-AiAayush31-Ai

framer-motion

Create animations and transitions in React applications using Framer Motion.

Community
Intermediate
AnglesiteAnglesite
2

animate

Design CSS animations with vanilla CSS custom properties for hover effects, scroll reveals, and page transitions.

Official
Advanced