--- name: adding-animations description: Add micro-interactions and animations using Framer Motion. Use when user asks about animations, transitions, hover effects, or motion design. MANDATORY for every component. allowed-tools: Read, Write, Edit, Glob, Grep, Task --- # Adding Animations (MANDATORY) Every component MUST have Framer Motion animations. ## APEX WORKFLOW ### Phase 0: ANALYZE EXISTING ANIMATIONS ``` Task: explore-codebase Prompt: "Find existing Framer Motion patterns: variants, timing, easing, hover effects. Report animation conventions." ``` **RULE:** Match existing animation patterns OR propose migration. ## Standard Patterns ### Container + Stagger (REQUIRED) ```tsx import { motion } from "framer-motion"; const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1 } } }; const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 } }; Item 1 Item 2 ``` ### Hover Effects (REQUIRED) ```tsx // Card hover // Button hover ``` ### Scroll Animation ```tsx ``` ## Timing Guidelines | Interaction | Duration | Easing | |-------------|----------|--------| | Hover | 50-100ms | ease-out | | Button press | 100-150ms | ease-out | | Modal open | 200-300ms | ease-out | | Page transition | 300-400ms | ease-in-out | ## FORBIDDEN ```tsx // ❌ Random bouncing loops animate={{ y: [0, -10, 0] }} transition={{ repeat: Infinity }} // ❌ Excessive effects whileHover={{ scale: 1.2, rotate: 5 }} // ❌ Slow animations transition={{ duration: 1.5 }} ``` ## Accessibility (MANDATORY) ```tsx import { useReducedMotion } from "framer-motion"; function Component() { const shouldReduce = useReducedMotion(); return ( ); } ``` ## Validation ``` [ ] Existing animations analyzed (Phase 0) [ ] Patterns match existing OR migration proposed [ ] Stagger on lists/grids [ ] Hover on all interactive elements [ ] prefers-reduced-motion respected [ ] No excessive/random animations ``` ## References - **APEX Motion**: `references/design/05-add-motion.md` - **Motion Patterns**: `references/motion-patterns.md`

adding-animations

Install this skill

Comments