190 lines
8.1 KiB
Markdown
190 lines
8.1 KiB
Markdown
---
|
|
name: animate
|
|
description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
|
|
user-invokable: true
|
|
args:
|
|
- name: target
|
|
description: The feature or component to animate (optional)
|
|
required: false
|
|
---
|
|
|
|
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
|
|
|
|
## MANDATORY PREPARATION
|
|
|
|
### Context Gathering (Do This First)
|
|
|
|
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone (playful vs serious, energetic vs calm), and performance constraints.
|
|
|
|
Attempt to gather these from the current thread or codebase.
|
|
|
|
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
|
|
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
|
|
|
|
Do NOT proceed until you have answers. Guessing leads to inappropriate or excessive animation.
|
|
|
|
### Use frontend-design skill
|
|
|
|
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
|
|
|
|
---
|
|
|
|
## Assess Animation Opportunities
|
|
|
|
Analyze where motion would improve the experience:
|
|
|
|
1. **Identify static areas**:
|
|
- **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)
|
|
- **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)
|
|
- **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious
|
|
- **Lack of delight**: Functional but joyless interactions
|
|
- **Missed guidance**: Opportunities to direct attention or explain behavior
|
|
|
|
2. **Understand the context**:
|
|
- What's the personality? (Playful vs serious, energetic vs calm)
|
|
- What's the performance budget? (Mobile-first? Complex page?)
|
|
- Who's the audience? (Motion-sensitive users? Power users who want speed?)
|
|
- What matters most? (One hero animation vs many micro-interactions?)
|
|
|
|
If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
|
|
|
|
**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.
|
|
|
|
## Plan Animation Strategy
|
|
|
|
Create a purposeful animation plan:
|
|
|
|
- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
|
|
- **Feedback layer**: Which interactions need acknowledgment?
|
|
- **Transition layer**: Which state changes need smoothing?
|
|
- **Delight layer**: Where can we surprise and delight?
|
|
|
|
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
|
|
|
|
## Implement Animations
|
|
|
|
Add motion systematically across these categories:
|
|
|
|
### Entrance Animations
|
|
- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations
|
|
- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
|
|
- **Content reveals**: Scroll-triggered animations using intersection observer
|
|
- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
|
|
|
|
### Micro-interactions
|
|
- **Button feedback**:
|
|
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
|
|
- Click: Quick scale down then up (0.95 → 1), ripple effect
|
|
- Loading: Spinner or pulse state
|
|
- **Form interactions**:
|
|
- Input focus: Border color transition, slight scale or glow
|
|
- Validation: Shake on error, check mark on success, smooth color transitions
|
|
- **Toggle switches**: Smooth slide + color transition (200-300ms)
|
|
- **Checkboxes/radio**: Check mark animation, ripple effect
|
|
- **Like/favorite**: Scale + rotation, particle effects, color transition
|
|
|
|
### State Transitions
|
|
- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
|
|
- **Expand/collapse**: Height transition with overflow handling, icon rotation
|
|
- **Loading states**: Skeleton screen fades, spinner animations, progress bars
|
|
- **Success/error**: Color transitions, icon animations, gentle scale pulse
|
|
- **Enable/disable**: Opacity transitions, cursor changes
|
|
|
|
### Navigation & Flow
|
|
- **Page transitions**: Crossfade between routes, shared element transitions
|
|
- **Tab switching**: Slide indicator, content fade/slide
|
|
- **Carousel/slider**: Smooth transforms, snap points, momentum
|
|
- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators
|
|
|
|
### Feedback & Guidance
|
|
- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights
|
|
- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
|
|
- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation
|
|
- **Focus flow**: Highlight path through form or workflow
|
|
|
|
### Delight Moments
|
|
- **Empty states**: Subtle floating animations on illustrations
|
|
- **Completed actions**: Confetti, check mark flourish, success celebrations
|
|
- **Easter eggs**: Hidden interactions for discovery
|
|
- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches
|
|
|
|
## Technical Implementation
|
|
|
|
Use appropriate techniques for each animation:
|
|
|
|
### Timing & Easing
|
|
|
|
**Durations by purpose:**
|
|
- **100-150ms**: Instant feedback (button press, toggle)
|
|
- **200-300ms**: State changes (hover, menu open)
|
|
- **300-500ms**: Layout changes (accordion, modal)
|
|
- **500-800ms**: Entrance animations (page load)
|
|
|
|
**Easing curves (use these, not CSS defaults):**
|
|
```css
|
|
/* Recommended - natural deceleration */
|
|
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */
|
|
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Slightly snappier */
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Confident, decisive */
|
|
|
|
/* AVOID - feel dated and tacky */
|
|
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
|
|
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
|
|
```
|
|
|
|
**Exit animations are faster than entrances.** Use ~75% of enter duration.
|
|
|
|
### CSS Animations
|
|
```css
|
|
/* Prefer for simple, declarative animations */
|
|
- transitions for state changes
|
|
- @keyframes for complex sequences
|
|
- transform + opacity only (GPU-accelerated)
|
|
```
|
|
|
|
### JavaScript Animation
|
|
```javascript
|
|
/* Use for complex, interactive animations */
|
|
- Web Animations API for programmatic control
|
|
- Framer Motion for React
|
|
- GSAP for complex sequences
|
|
```
|
|
|
|
### Performance
|
|
- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties
|
|
- **will-change**: Add sparingly for known expensive animations
|
|
- **Reduce paint**: Minimize repaints, use `contain` where appropriate
|
|
- **Monitor FPS**: Ensure 60fps on target devices
|
|
|
|
### Accessibility
|
|
```css
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
```
|
|
|
|
**NEVER**:
|
|
- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
|
|
- Animate layout properties (width, height, top, left)—use transform instead
|
|
- Use durations over 500ms for feedback—it feels laggy
|
|
- Animate without purpose—every animation needs a reason
|
|
- Ignore `prefers-reduced-motion`—this is an accessibility violation
|
|
- Animate everything—animation fatigue makes interfaces feel exhausting
|
|
- Block interaction during animations unless intentional
|
|
|
|
## Verify Quality
|
|
|
|
Test animations thoroughly:
|
|
|
|
- **Smooth at 60fps**: No jank on target devices
|
|
- **Feels natural**: Easing curves feel organic, not robotic
|
|
- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)
|
|
- **Reduced motion works**: Animations disabled or simplified appropriately
|
|
- **Doesn't block**: Users can interact during/after animations
|
|
- **Adds value**: Makes interface clearer or more delightful
|
|
|
|
Remember: 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. |