skills.rest
aungpwint
aungpwintCOMMUNITY
Explore all skills by this author →
GitHub

motion

Implements React and vanilla JS UI animations using the Motion library APIs.

Updated Aug 26, 2026
Search Tags:#motion#react animation#variants#animatepresence#framer motion#scroll animation#springs
One-click install
npx skills add https://github.com/aungpwint/presentation --skill motion-aungpwint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/motion
Command: npx skills add https://github.com/aungpwint/presentation --skill motion-aungpwint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires motion.

What problem does it solve? Building polished UI animations in React—enter/exit transitions, scroll-driven effects, gestures, and layout changes—requires knowing the correct Motion (formerly Framer Motion) APIs, transition configs, and performance pitfalls, which this Skill consolidates into actionable guidance. ## Core Features & Use Cases - Component & Gesture Animation: Use motion components with animate, initial, whileHover, whileTap, and whileInView for micro-interactions on buttons, cards, and modals. - Scroll-Driven & Layout Animation: Drive animations from scroll position with useScroll, useTransform, and useSpring, and animate layout changes with layout and layoutId shared transitions. - Variants, Springs & Exit Animations: Orchestrate staggered children with variants, tune spring physics, and animate unmounting components with AnimatePresence. - Use Case: When adding a modal that fades and slides in, a scroll-reveal hero section, or a card that morphs into a full-screen view, this Skill provides the exact Motion patterns and reduced-motion safeguards to implement them. ## Quick Start Use the motion skill to add a spring-based enter and exit animation to my React modal component.

Frequently Asked Questions about motion

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

FAQPage Schema
How do I animate a component mounting and unmounting in React?▼

Wrap the conditional component in AnimatePresence from motion/react and give the motion element initial, animate, and exit props. Use mode="wait" or mode="sync" to control how leaving and entering elements overlap in time.

How to create scroll-driven animations with Framer Motion?▼

Use the useScroll hook to get scrollYProgress, then map it with useTransform to derived values like y or opacity, and pass them via the style prop. Add useSpring to smooth the MotionValue for a softer scroll response.

What is the difference between Motion for React and Motion One?▼

Motion for React (motion/react) provides declarative motion components, hooks, and AnimatePresence for React apps. Motion One (the motion package) exposes an imperative animate() function built on the Web Animations API for framework-agnostic vanilla JS.

Does Motion support reduced motion accessibility preferences?▼

Yes. Use the useReducedMotion hook or a prefers-reduced-motion CSS media query to detect the setting, then skip or simplify non-essential animations. The skill requires respecting this preference for every scroll and animation effect.

Why are my Motion animations janky or slow?▼

Jank usually comes from animating layout properties like width, height, top, or left instead of GPU-friendly transform and opacity. Also avoid animating huge lists and replace window scroll listeners with useScroll progress tracking.

Related Skills

Explore More Software Engineering Skills→
robotostudiorobotostudio
172

vercel-react-view-transitions

Implement UI state transitions in React apps using the View Transition API with Next.js routing support.

Official
Advanced
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
wyrmspirewyrmspire

video-to-website

Convert video files into scroll-driven animated websites with FFmpeg, GSAP, and Lenis.

Community
Advanced
gerald-icagerald-ica

3d-web-experience

Develops 3D web experiences using Three.js, React Three Fiber, and Spline for product configurators and immersive websites.

Community
Advanced