Automate React component animations using the motion/react API.
npx skills add https://github.com/stephanofer/finance-trackerv2 --skill motion-stephanofer
Please help me install this Agent Skill. Skill: motion Source: https://github.com/stephanofer/finance-trackerv2/tree/main/.opencode/skill/motion Command: npx skills add https://github.com/stephanofer/finance-trackerv2 --skill motion-stephanofer
Motion provides a simple, consistent way to add smooth, high-performance animations to React components, eliminating ad-hoc CSS tricks and scattered animation logic.
Install the library (npm install motion) and import { motion } from "motion/react". Then render a basic motion.div with initial, animate, and exit props to see a simple animation.
High-intent search queries and answers about installing and using this skill.
React UI animation is simplified by using motion elements with initial, animate, and exit props. This approach replaces scattered CSS tricks with a deterministic, high-performance API for transitions, entrances, and exits.
Exit animations in React are handled using AnimatePresence to manage component lifecycles. Wrapping components in AnimatePresence allows you to define exit props on motion elements, ensuring smooth exit transitions before unmounting.
Gesture interactions are supported using whileHover, whileTap, and in-view props on motion elements. These props enhance interactivity by automatically triggering animations when users hover, tap, or scroll components into view.
Orchestrating complex animation sequences is achieved using variants and staggering. Variants define animation states for parent and child components, allowing synchronized, staggered transitions across lists and grids with minimal code.
Layout animations auto-arrange grids, panels, and lists smoothly when items are added or removed. By applying layout props to motion elements, the React UI automatically transitions items to their new positions deterministically.
You need to install the motion library via npm install motion. After installation, import the motion API from motion/react to start rendering animated components with variants, gestures, and layout support.
Aayush31-AiCreate animations and transitions in React applications using Framer Motion.
AlejandroFiginiAutomates React UI animations using dedicated motion components and patterns.
jezwebCreate declarative Motion animations for React components with gestures, scroll effects, and layout transitions.
daffy0208Implement motion design improvements for React web applications using Framer Motion, CSS, Tailwind, and GSAP.
