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.