motion

Create declarative animations in React with gestures and scroll effects.

261|31|Updated Jul 8, 2025

Search Tags:#ui #performance #react #animation #transitions #gestures

Ready to run

npx skills add https://github.com/theexperiencecompany/gaia --skill motion-theexperiencecompany

💬 Prompt for ChatGPT / Claude Chat▼

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

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 animations in React applications, eliminating the need for manual DOM manipulation and complex state management for animations.

Core Features & Use Cases

Declarative Animations: Define animations using props like initial, animate, exit, and whileHover.
Gestures & Interactions: Easily implement drag, hover, tap, and scroll-based animations.
Layout & Shared Element Transitions: Create seamless transitions between UI states and pages.
Use Case: Add a smooth fade-in and slide-up effect to components as they enter the viewport, create interactive buttons that scale on hover, or implement complex parallax scrolling effects for a landing page.

Quick Start

Use the motion skill to animate a div with initial opacity 0 and animate opacity to 1.

Frequently Asked Questions about motion

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

FAQPage Schema

How do I build declarative React animations without manual DOM manipulation?▼

Declarative React animations use props like initial, animate, and exit to define transitions. This approach eliminates manual DOM manipulation and complex state management by letting you declare UI states directly, handling gestures and layout transitions automatically.

Can I use this React animation approach with Next.js and Vite?▼

Yes, this React animation approach integrates with Next.js and Vite. It supports modern framework architectures and provides performance optimizations like LazyMotion to reduce bundle size while maintaining hardware-accelerated CSS transforms and opacity transitions.

What's the best way to implement scroll-triggered effects and gestures in React?▼

Implement scroll-triggered effects and gestures in React using a declarative API. You can define drag, hover, tap, and scroll-based interactions directly via props, creating interactive buttons that scale on hover or complex parallax scrolling for landing pages.

How do I create seamless layout and shared element transitions between UI states?▼

Create seamless layout and shared element transitions by defining UI state changes declaratively. The API automatically animates layout shifts and shared elements between pages or components, ensuring fluid visual continuity without manual position calculations.

How do I optimize React animation bundle size for performance-critical applications?▼

Optimize React animation bundle size using LazyMotion for reduced payload. It leverages hardware acceleration via CSS transforms and opacity, ensuring performance-critical applications maintain smooth 60fps transitions without loading unnecessary animation features.

Why do my React UI state transitions feel janky during component mount and unmount?▼

React UI state transitions feel janky without proper exit animations and hardware acceleration. Using a declarative API with animate and exit props ensures components mount and unmount smoothly by offloading CSS transforms and opacity changes to the GPU.