Motion React
Motion React lets you build fluid animations and interactive effects in React applications using declarative components and hooks. Animate on gestures (drag, hover, tap), scroll events, and layout changes with spring physics, keyframes, and exit animations via AnimatePresence.
Motion React enables you to create smooth animations and gesture-driven interactions in React components.
AI-generated summary based on this skill's SKILL.md
Install
pedronauck/skills/motion-react · repository language: JavaScript
git clone https://github.com/pedronauck/skills
cp -r skills ~/.claude/skills/motion-reactgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install pedronauck/skills/motion-reactFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to use motion in React applications?
Motion React enables you to build fluid animations through declarative components and hooks. Use the `motion` component wrapper around DOM elements, apply animation props like `animate`, `initial`, and `exit`, and leverage spring physics or keyframe sequences. AnimatePresence handles exit animations when components unmount, making transitions smooth and natural.
Does Motion React support gesture and interaction animations?
Motion React includes built-in gesture support for drag, hover, tap, and focus interactions. You can animate on these gestures directly within component props, and combine them with scroll events and layout changes. This makes Motion React ideal for interactive UI effects without additional libraries.
What is Motion React and how does it compare with other solutions?
Motion React is a React animation library offering declarative, component-based animations with spring physics and keyframes. Compared to alternatives, Motion React emphasizes gesture support, layout animations, and exit transitions via AnimatePresence. It's designed for both simple UI transitions and complex interactive effects.
How do you set up Motion React in a React project?
Install Motion React via npm with `npm install motion`. Import the library into your components, wrap elements with motion components, and define animation states using `initial`, `animate`, and `exit` props. Use AnimatePresence to manage animations when components mount or unmount.
What animation features does Motion React provide?
Motion React delivers smooth animations through spring physics, keyframe sequences, and exit animations. It supports drag and drop interactions, hover effects, tap animations, and scroll-triggered animations. The library also handles layout animations and provides hooks for programmatic control over animation states.
Where can I find Motion React documentation and examples?
Motion React documentation covers installation, API reference, and best practices for animations and gestures. The npm package includes examples for common patterns like transitions, drag interactions, and layout animations. Official guides walk through getting started and advanced techniques for performance optimization.