skills.rest
mattaningram
mattaningramCOMMUNITY
Explore all skills by this author →
Website𝕏@mattaningramGitHub

motion

Create declarative React animations with Motion, including gestures and scroll-linked effects.

2|Updated Jun 14, 2015
Search Tags:#performance#react#animation#transitions#gestures#framer motion
One-click install
npx skills add https://github.com/mattaningram/mattaningram.com --skill motion-mattaningram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/mattaningram/mattaningram.com/tree/main/.agents/skills/motion
Command: npx skills add https://github.com/mattaningram/mattaningram.com --skill motion-mattaningram

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill empowers developers to build sophisticated, performant, and accessible animations in React applications without the steep learning curve or complex setup.

Core Features & Use Cases

  • Declarative Animations: Define animations using simple props and variants.
  • Gestures & Interactions: Implement drag, hover, tap, and pan gestures.
  • Scroll & Layout Animations: Create parallax effects, scroll-triggered reveals, and smooth layout transitions (FLIP).
  • Performance: Optimized for small bundle sizes (2.3 KB - 4.6 KB with LazyMotion) and hardware acceleration.
  • Use Case: Build interactive product showcases with parallax scrolling, implement drag-and-drop interfaces, or create seamless transitions between pages and components.

Quick Start

Use the motion skill to animate a div element with fade-in and slide-up effects on mount.

Frequently Asked Questions about motion

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

FAQPage Schema
How do I create declarative React animations using the Motion library?▼

To create declarative React animations with the Motion library, you define animations using simple props and variants on motion components, enabling you to easily build fade-in, slide-up, and other complex effects on mount.

Does the Motion library support scroll-linked parallax effects and layout transitions in React?▼

Yes, the Motion library supports scroll-linked animations like parallax effects and scroll-triggered reveals in React, alongside smooth layout transitions using the FLIP technique for seamless component shifting.

Can I use Motion for React gestures like drag and drop interfaces?▼

Yes, you can use Motion for React gestures to implement interactive drag, hover, tap, and pan gestures, making it suitable for building interactive product showcases and drag-and-drop interfaces.

What is the best way to reduce React animation bundle size with LazyMotion?▼

The best way to reduce React animation bundle size is using LazyMotion, which optimizes imports and limits the Motion library footprint to approximately 2.3 KB - 4.6 KB while maintaining hardware acceleration.

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

Yes, the Motion library integrates with frameworks like Next.js and Vite, offering optimized imports to ensure performant and accessible React animations across different build environments.

Related Skills

Explore More Software Engineering Skills→
hilaryosbornehilaryosborne

tl-react-style-guide

Enforce React component style rules for TypeScript, Tailwind CSS, and Next.js App Router.

Community
Intermediate
pproencapproenca
193

framer-motion

Optimize React animations with Framer Motion performance guidelines.

Community
Advanced
markus41markus41
18

Framer Motion Skill

Create declarative animations and gesture recognition for React applications with Framer Motion.

Community
Intermediate
KamalabotKamalabot

waapi

Create native WAAPI animations with deterministic timing within HyperFrames.

Community
Intermediate