Animate

1---2name: animate3description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.4version: 2.1.15user-invocable: true6argument-hint: "[target]"7---8 9Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.10 11## MANDATORY PREPARATION12 13Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints.14 15---16 17## Assess Animation Opportunities18 19Analyze where motion would improve the experience:20 211. **Identify static areas**:22   - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)23   - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)24   - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious25   - **Lack of delight**: Functional but joyless interactions26   - **Missed guidance**: Opportunities to direct attention or explain behavior27 282. **Understand the context**:29   - What's the personality? (Playful vs serious, energetic vs calm)30   - What's the performance budget? (Mobile-first? Complex page?)31   - Who's the audience? (Motion-sensitive users? Power users who want speed?)32   - What matters most? (One hero animation vs many micro-interactions?)33 34If any of these are unclear from the codebase, STOP and call the AskUserQuestion tool to clarify.35 36**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.37 38## Plan Animation Strategy39 40Create a purposeful animation plan:41 42- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)43- **Feedback layer**: Which interactions need acknowledgment?44- **Transition layer**: Which state changes need smoothing?45- **Delight layer**: Where can we surprise and delight?46 47**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.48 49## Implement Animations50 51Add motion systematically across these categories:52 53### Entrance Animations54- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations55- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)56- **Content reveals**: Scroll-triggered animations using intersection observer57- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management58 59### Micro-interactions60- **Button feedback**:61  - Hover: Subtle scale (1.02-1.05), color shift, shadow increase62  - Click: Quick scale down then up (0.95 → 1), ripple effect63  - Loading: Spinner or pulse state64- **Form interactions**:65  - Input focus: Border color transition, slight scale or glow66  - Validation: Shake on error, check mark on success, smooth color transitions67- **Toggle switches**: Smooth slide + color transition (200-300ms)68- **Checkboxes/radio**: Check mark animation, ripple effect69- **Like/favorite**: Scale + rotation, particle effects, color transition70 71### State Transitions72- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)73- **Expand/collapse**: Height transition with overflow handling, icon rotation74- **Loading states**: Skeleton screen fades, spinner animations, progress bars75- **Success/error**: Color transitions, icon animations, gentle scale pulse76- **Enable/disable**: Opacity transitions, cursor changes77 78### Navigation & Flow79- **Page transitions**: Crossfade between routes, shared element transitions80- **Tab switching**: Slide indicator, content fade/slide81- **Carousel/slider**: Smooth transforms, snap points, momentum82- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators83 84### Feedback & Guidance85- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights86- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning87- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation88- **Focus flow**: Highlight path through form or workflow89 90### Delight Moments91- **Empty states**: Subtle floating animations on illustrations92- **Completed actions**: Confetti, check mark flourish, success celebrations93- **Easter eggs**: Hidden interactions for discovery94- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches95 96## Technical Implementation97 98Use appropriate techniques for each animation:99 100### Timing & Easing101 102**Durations by purpose:**103- **100-150ms**: Instant feedback (button press, toggle)104- **200-300ms**: State changes (hover, menu open)105- **300-500ms**: Layout changes (accordion, modal)106- **500-800ms**: Entrance animations (page load)107 108**Easing curves (use these, not CSS defaults):**109```css110/* Recommended - natural deceleration */111--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */112--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */113--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */114 115/* AVOID - feel dated and tacky */116/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */117/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */118```119 120**Exit animations are faster than entrances.** Use ~75% of enter duration.121 122### CSS Animations123```css124/* Prefer for simple, declarative animations */125- transitions for state changes126- @keyframes for complex sequences127- transform + opacity only (GPU-accelerated)128```129 130### JavaScript Animation131```javascript132/* Use for complex, interactive animations */133- Web Animations API for programmatic control134- Framer Motion for React135- GSAP for complex sequences136```137 138### Performance139- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties140- **will-change**: Add sparingly for known expensive animations141- **Reduce paint**: Minimize repaints, use `contain` where appropriate142- **Monitor FPS**: Ensure 60fps on target devices143 144### Accessibility145```css146@media (prefers-reduced-motion: reduce) {147  * {148    animation-duration: 0.01ms !important;149    animation-iteration-count: 1 !important;150    transition-duration: 0.01ms !important;151  }152}153```154 155**NEVER**:156- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself157- Animate layout properties (width, height, top, left)—use transform instead158- Use durations over 500ms for feedback—it feels laggy159- Animate without purpose—every animation needs a reason160- Ignore `prefers-reduced-motion`—this is an accessibility violation161- Animate everything—animation fatigue makes interfaces feel exhausting162- Block interaction during animations unless intentional163 164## Verify Quality165 166Test animations thoroughly:167 168- **Smooth at 60fps**: No jank on target devices169- **Feels natural**: Easing curves feel organic, not robotic170- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)171- **Reduced motion works**: Animations disabled or simplified appropriately172- **Doesn't block**: Users can interact during/after animations173- **Adds value**: Makes interface clearer or more delightful174 175Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.