skills.rest
flosrn
flosrnCOMMUNITY
Explore all skills by this author →
𝕏@flo_srnGitHub

motion

Create declarative animations in React using the Motion library.

Updated Aug 6, 2025
Search Tags:#react#animation#gestures#framer motion#scroll animation#layout animation
One-click install
npx skills add https://github.com/flosrn/.claude --skill motion-flosrn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/flosrn/.claude/tree/main/skills/motion
Command: npx skills add https://github.com/flosrn/.claude --skill motion-flosrn

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, performant, and accessible animations in React applications, eliminating common pitfalls and boilerplate code.

Core Features & Use Cases

  • Declarative Animations: Build sophisticated animations with minimal code using Motion (formerly Framer Motion).
  • Gestures & Interactions: Implement drag-and-drop, hover effects, tap feedback, and more.
  • Scroll & Layout Animations: Create parallax effects, scroll-triggered reveals, shared element transitions, and smooth layout changes.
  • Performance & Accessibility: Optimize bundle size (down to 2.3 KB), leverage hardware acceleration, and respect user's prefers-reduced-motion setting.
  • Use Case: Add a smooth, physics-based spring animation to a button that scales up on hover and shrinks on tap, providing delightful micro-interactions.

Quick Start

Install the motion package and import the motion component to start animating your React elements.

Frequently Asked Questions about motion

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

FAQPage Schema
How do I create React animations with gesture controls like drag and tap?▼

React animations with gesture controls like drag, hover, and tap are created declaratively using the Motion library. You import the motion component to build physics-based micro-interactions that scale or shrink elements in response to user input.

What's the best way to implement scroll-linked animations and parallax effects in React?▼

Scroll-linked animations and parallax effects in React are implemented declaratively using Motion. The library facilitates scroll-triggered reveals and smooth layout transitions, optimizing visual effects through hardware acceleration for performance.

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

Yes, the Motion library integrates with Next.js and Vite. It requires a React 18+ environment and supports modern build setups, allowing you to add declarative animations and layout transitions within these frameworks.

How do I optimize React animation bundle size and support reduced motion preferences?▼

React animation bundle size is optimized using LazyMotion, reducing it to 2.3 KB. Accessibility is maintained by respecting the user's prefers-reduced-motion setting, ensuring animations disable appropriately for sensitive users.

Can I build shared element transitions and FLIP layout animations in React?▼

Shared element transitions and FLIP layout animations are supported in React using Motion. The library handles smooth layout changes declaratively, animating elements between positions seamlessly without manual calculation boilerplate.

Why should I use declarative animations instead of manual CSS transitions in React?▼

Declarative animations in React eliminate boilerplate code and common animation pitfalls associated with manual CSS. Using Motion simplifies complex interactions like drag-and-drop and SVG animations while optimizing for performance and accessibility.

Related Skills

Explore More Software Engineering Skills→
notbozhonotbozho

motion

Provides React animations with gestures, scroll effects, and layout transitions.

Community
Advanced
FldicoahkiinFldicoahkiin
1

animate

Identify animation opportunities for UI components across web and mobile interfaces.

Community
Advanced
yahav123147yahav123147

framer-motion-best-practices

Review and refactor React components using Framer Motion APIs for performance and correctness.

Community
Advanced
harlan-zwharlan-zw
174

motion-v-skilld

Animate Vue.js components with declarative props and gesture controls.

Community
Advanced