ai-animationlisted

# Animation ## Quick start ``` /ai-animation save button # micro-interaction /ai-animation swipe-to-dismiss for toast # gesture design /ai-animation review the modal entry # review existing motion ``` ## Workflow Motion design based on Emil Kowalski's design-engineering philosophy: animation is about feel, not decoration. In competitive markets where functionality is table-stakes, taste becomes the differentiator. 1. **Run the Decision Framework** (4 questions): should it animate, what purpose, what easing, how fast? 2. **Load the relevant handler** for the work type (motion principles, components, clip-path, gestures, performance, sonner-principles). 3. **Apply the rules** from the loaded handler. 4. **Review** with the checklist; **test on real devices** for gestures (simulator misses touch latency). > Detail: see [decision framework](references/decision-framework.md), [easing curves and review checklist](references/easing-curves.md), [accessibility (reduced motion + touch hover)](references/accessibility.md), [stagger + debugging](references/stagger-and-debug.md). ## When to Use - Adding animations or transitions to components - Designing micro-interactions (button press, hover, focus) - Building gesture-based interactions (swipe, drag, pinch) - Reviewing existing animations for polish and performance - Choosing easing curves, durations, spring configurations - Implementing scroll-triggered animations - Building loading/skele