motion

Create interactive React animations with Motion for gestures, scroll effects, and shared elements.

Updated Feb 3, 2026
One-click install
npx skills add https://github.com/eKoh951/hytale-gg --skill motion-ekoh951
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/eKoh951/hytale-gg/tree/main/.windsurf/skills/motion
Command: npx skills add https://github.com/eKoh951/hytale-gg --skill motion-ekoh951

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pypdf, pdfplumber, pdf2image, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Motion provides a declarative API for building rich, gesture-driven, scroll-based, and layout-driven animations in React apps, reducing boilerplate and improving UI polish.

Core Features & Use Cases

  • Gestures: drag, hover, tap, pan, and focus interactions for engaging UI.
  • Scroll & Parallax: viewport-triggered reveals, scroll-linked transforms, and parallax effects.
  • Layout & Shared Elements: GPU-accelerated FLIP layout animations and smooth shared element transitions.
  • SVG & Vector Animations: path morphing and line drawing for scalable visuals.
  • Accessibility & Performance: reduced-motion support and on-demand feature loading with LazyMotion.

Quick Start

Install Motion and begin using motion components to add declarative animations to your React UI.

Frequently Asked Questions about motion

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

FAQPage Schema
How do I build scroll-linked parallax animations in React?▼

You can build scroll-linked parallax animations in React using Motion's useScroll hook to trigger viewport-based reveals and scroll-linked transforms across UI components.

What is the best way to animate shared layout transitions in a React dashboard?▼

The best way to animate shared layout transitions in a React dashboard is using Motion's GPU-accelerated FLIP layout animations and LayoutGroup component for smooth element transitions.

Can I use Motion for gesture interactions like drag and hover in React components?▼

Yes, you can use Motion to add gesture interactions like drag, hover, tap, and pan to React components by applying declarative animation properties directly to your UI elements.

Do I need LazyMotion to optimize my React animation bundle size?▼

You need LazyMotion to optimize your React animation bundle size by enabling on-demand feature loading, which reduces the initial bundle footprint when adding complex Motion animations.

Does Motion support accessibility requirements for reduced-motion in React apps?▼

Motion supports accessibility requirements in React apps by providing built-in reduced-motion support, ensuring animations respect user preferences for minimized movement.

How do I animate SVG path morphing and line drawing in React?▼

You can animate SVG path morphing and line drawing in React by applying Motion's declarative animation API to SVG elements, enabling scalable vector visual effects.