motion

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

5|Updated Jan 20, 2026

Search Tags:#ui #performance #layout #react #animation #web #gestures

Ready to run

npx skills add https://github.com/mohamedgshoaib/reway --skill motion-mohamedgshoaib

💬 Prompt for ChatGPT / Claude Chat▼

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.