motion-react - Build React Animations with Motion (Framer Motion)
Create React animations using the Motion library including gestures, scroll effects, spring physics, layout animations, exit animations, and motion values.
Tags
Updated: 2026-06-30Capabilities
Typical Inputs
Typical Outputs
What this skill does
- create motion components
- animate CSS values
- configure spring and tween transitions
- handle drag interactions
- create hover and tap gestures
- build scroll-linked animations
- implement shared layout animations
- create exit animations with AnimatePresence
- manage motion values and transforms
- define orchestrated animation variants
- optimize animation bundle size
Inputs
- React project
- motion npm package
- CSS or Tailwind stylesheets
Outputs
- Animated React components
- Gesture-interactive UI elements
- Scroll-triggered animation effects
- Layout transition animations
Requirements
- React project environment
- motion package installed via pnpm/npm
- Client-side rendering for Next.js App Router
- forwardRef on custom components for popLayout mode