Official Framer Motion skill for animation variants — state machines, orchestrated animations, stagger, repeat, sequencing. Use when building orchestrated animations, animation state machines, staggered entrances, or when asking about Framer Motion variants, transition variants, or choreographed ani

Framer Motion Variants When to Use This Skill Apply when building multi step animations, coordinated animations across multiple elements, or when using variants for state based animation control. Variants are Framer Motion's way of defining reusable animation states that can be choreographed. Related skills: For core animation props use framer motion core ; for React integration use framer motion react ; for scroll driven variants use framer motion scroll . Defining Variants Variants are objects that define animation states: Variant Types Static Variants Dynamic Variants Orchestration staggerChildren Stagger children animations: staggerDirection Repeating Animations repeatType Options Type Behavior "loop" Restart from beginning "reverse" Play forward then backward "mirror" Swap states on each repeat Keyframes Animate through multiple values: State Machine with custom Parent Child Coordination Best practices ✅ Use variants for reusable, coordinated animations. ✅ Use staggerChildren for list animations. ✅ Use custom prop to pass dynamic values. ✅ Define exit variants for AnimatePresence. ✅ Use when option for parent child coordination. Do Not ❌ Mix motion values and variants incorrectly. ❌ Forget that variant transitions can be overridden. ❌ Use too many variant states (keep to 3 5). ❌ Forget to pass custom when needed. Learn More https://www.framer.com/motion/animation/ https://www.framer.com/motion/variants/

framer-motion-variants