motion

Create declarative UI animations for JavaScript, React, and Vue.

5|Updated Jan 20, 2026
One-click install
npx skills add https://github.com/mohamedgshoaib/reway --skill motion-mohamedgshoaib
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/mohamedgshoaib/reway/tree/main/.agents/skills/motion
Command: npx skills add https://github.com/mohamedgshoaib/reway --skill motion-mohamedgshoaib

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the complexity of creating performant, production-ready animations in JavaScript, React, and Vue, eliminating the need for manual animation loop management or heavy CSS-only workarounds.

Core Features & Use Cases

  • Declarative Animations: Easily define enter, exit, and interaction states using variants.
  • Gesture Support: Built-in handlers for drag, pan, hover, and tap interactions.
  • Layout Transitions: Automatic FLIP-based layout animations for seamless UI updates.
  • Use Case: Use this Skill to create a complex, multi-step dashboard transition where elements reorder themselves smoothly when a user drags and drops items.

Quick Start

Use the motion skill to animate a div element from opacity zero to one with a spring transition.

Frequently Asked Questions about motion

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

FAQPage Schema
How do I create performant layout animations in React?

To create performant layout animations in React, use a library that supports FLIP-based automatic transitions and GPU-accelerated engines to smoothly update UI elements without manual animation loop management.

What is the best way to handle drag and reorder gestures in a web app?

Handling drag to reorder gestures requires built-in interaction handlers that support drag, pan, and tap events, allowing you to declaratively define complex multi-step UI transitions for reordering elements.

How do I animate component exit transitions in Vue?

Animating component exit transitions in Vue is achieved by using an AnimatePresence feature to manage optimized exit animations, ensuring elements are removed smoothly after their exit animation completes.

Can I use tree-shakable animation builds for production web apps?

Yes, you can use tree-shakable animation builds for production web apps to eliminate heavy CSS-only workarounds and reduce the final bundle size by including only the necessary animation code.

How do scroll-linked animations work in modern JavaScript UIs?

Scroll-linked animations in modern JavaScript UIs work by binding GPU-accelerated animation engines to scroll position, creating production-ready scroll-linked effects that move UI elements smoothly in response to user scrolling.