skills.rest
evolv3ai
evolv3aiCOMMUNITY
Explore all skills by this author →
GitHub

motion

Create React animations with Motion library gestures, scroll effects, and spring physics.

3|Updated Nov 14, 2025
Search Tags:#frontend#react#animation#ui development#gestures#scroll effects#framer motion
One-click install
npx skills add https://github.com/evolv3ai/claude-skills-archive --skill motion-evolv3ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/evolv3ai/claude-skills-archive/tree/main/skills/motion
Command: npx skills add https://github.com/evolv3ai/claude-skills-archive --skill motion-evolv3ai

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the creation of complex animations in React applications, reducing development time and preventing common animation-related bugs.

Core Features & Use Cases

  • Declarative Animations: Create gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG animations with minimal code.
  • Bundle Optimization: Offers small bundle sizes (2.3 KB - 34 KB) and optimization options.
  • Use Case: Build interactive UIs like drag-and-drop interfaces, animated modals, parallax scrolling effects, or smooth page transitions.

Quick Start

Use the motion skill to create a fade-in animation for the button component.

Frequently Asked Questions about motion

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

FAQPage Schema
How do I create declarative animations and gesture controls in React?▼

You can create declarative React animations, including drag, hover, tap, and scroll effects, using the Motion library. This skill enables sophisticated gesture controls and spring physics with minimal code to reduce development time.

Does the Motion library work with Next.js and Vite?▼

Yes, the Motion library integrates with popular frameworks like Next.js and Vite. This integration allows you to build interactive UIs with optimized bundle sizes ranging from 2.3 KB to 34 KB for your React applications.

Why does AnimatePresence exit animation not work in my React list?▼

AnimatePresence exit problems and list performance issues are common animation-related bugs. This skill addresses these specific AnimatePresence errors and resolves Tailwind CSS conflicts to ensure smooth layout animations in React.

What is the best way to build parallax scrolling and layout animations in React?▼

The best way to build parallax scrolling and layout animations in React is using the Motion library's declarative API. It supports spring physics and SVG manipulation to create smooth page transitions and interactive modals.

Can I use Motion for SVG manipulation and drag-and-drop interfaces?▼

Yes, you can use Motion for SVG manipulation and building drag-and-drop interfaces. The library supports declarative animations, spring physics, and gesture controls to create interactive UI components with optimized bundle sizes.

Related Skills

Explore More Software Engineering Skills→
s1366560s1366560
5

web-artifacts-builder

Create multi-component HTML artifacts with React, TypeScript, Vite, and Tailwind CSS.

Community
Advanced
VoTruongDanhVoTruongDanh

react-performance

Profile React apps with React DevTools and optimize re-renders and bundle size.

Community
Intermediate
VoDaiLoczVoDaiLocz
24

ui-styling

Automate building React UIs with shadcn/ui components and Tailwind CSS.

Community
Advanced
hii-saikrishnahii-saikrishna

react-spring-physics

Create physics-based animations in React with React Spring and Popmotion.

Community
Intermediate