skills.rest
ataschz
ataschzCOMMUNITY
Explore all skills by this author →
Website𝕏@ataschzGitHub

motion

Add gestures, layout transitions, and scroll-based effects to React UIs with Motion.

18|4|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/ataschz/tanstack-start-mastra-example --skill motion-ataschz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/ataschz/tanstack-start-mastra-example/tree/main/.agents/skills/motion
Command: npx skills add https://github.com/ataschz/tanstack-start-mastra-example --skill motion-ataschz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires motion, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables developers to add high-quality, GPU-accelerated animations to React UIs, replacing static layouts with interactive, motion-rich experiences.

Core Features & Use Cases

  • Gestures & Drag: supports drag, hover, tap interactions.
  • Layout & Shared Elements: FLIP-based layout animations and smooth transitions between views.
  • Scroll & Parallax: scroll-driven effects and parallax backgrounds for engaging UIs.
  • SVG Animations: path morphing and vector animations for dynamic graphics.
  • Performance & Bundling: supports LazyMotion to reduce bundle size and load animation features on demand.
  • Use Case: ideal for modals, carousels, dashboards, and product galleries.

Quick Start

Install Motion in your project with a package manager. For Next.js App Router, add "use client" to your component file and import from motion/react-client. For standard React setups, import from motion/react and use the motion components. Create a simple animated box using a motion.div with initial and animate props.

Frequently Asked Questions about motion

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

FAQPage Schema
How do I add React UI animations for gestures and layout transitions?▼

To add React UI animations, install the Motion library and use motion components with initial and animate props to handle gestures, layout transitions, and scroll-based effects.

Can I use Motion animations in a Next.js App Router project?▼

Motion animations work with Next.js App Router by adding "use client" to your component file and importing from motion/react-client to ensure client-side rendering of interactive elements.

Does this approach support scroll-based parallax effects and SVG path morphing?▼

Yes, the approach supports scroll-driven parallax backgrounds for engaging UIs and SVG path morphing for dynamic vector graphics within your React components.

What React version is required to animate UI components with this library?▼

Animating UI components with this library requires React 19 or higher, along with standard package installation via your preferred package manager to integrate the Motion library.

Why use FLIP-based layout animations for React modals and carousels?▼

FLIP-based layout animations provide smooth transitions between views, making them ideal for interactive React elements like modals, carousels, dashboards, and product galleries.

How do I handle drag and hover interactions in a React animated UI?▼

You handle drag and hover interactions by applying motion components that support gesture events, allowing you to build interactive and motion-rich experiences natively in React.

Related Skills

mohamedgshoaibmohamedgshoaib
5

motion-advanced

Implement physics-based animation patterns for React and Next.js with motion/react.

Community
Advanced
pedronauckpedronauck
567

motion

Create declarative animations in React with gestures, layout transitions, and SVG effects.

Community
Intermediate
nonputtipongnonputtipong

frontend-developer

Develop React components and responsive layouts with Next.js and TypeScript.

Community
Advanced
yonatangrossyonatangross
217

animation-motion-design

Create web animations with Motion and View Transitions API.

Community
Intermediate