archipelago
7ba3109b6d
git-subtree-dir: aiui git-subtree-mainline:0c4826f8ccgit-subtree-split:e30ac1d106
80 lines
2.2 KiB
Plaintext
80 lines
2.2 KiB
Plaintext
---
|
|
description: Animation principles - timing, easing, stagger, reduced motion
|
|
globs: "**/*.vue,**/*.css"
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Animation & Motion Design
|
|
|
|
## Philosophy
|
|
Every animation serves a purpose: guide attention, provide feedback, show relationships, enhance perceived performance, or add delight. Never animate for decoration alone.
|
|
|
|
## Duration Scale
|
|
```
|
|
100ms - Instant: micro-feedback (hover states, button press)
|
|
200ms - Fast: small elements (tooltips, dropdowns)
|
|
300ms - Moderate: standard UI transitions (modals, cards)
|
|
500ms - Normal: page sections, complex components
|
|
600ms - Slow: hero animations, page transitions (max for UI)
|
|
```
|
|
Never exceed 600ms for UI element animations.
|
|
|
|
## Easing Functions
|
|
- **ease-out** (90% of animations): elements entering viewport
|
|
- **ease-in**: elements exiting viewport
|
|
- **ease-in-out**: elements moving within viewport
|
|
- **spring**: playful interactions (button press, drag-and-drop)
|
|
- **linear**: progress bars, loading spinners only
|
|
|
|
Custom smooth deceleration: `cubic-bezier(0.16, 1, 0.3, 1)`
|
|
|
|
## Common Patterns
|
|
|
|
### Fade & Slide Up (entrance)
|
|
```css
|
|
@keyframes fadeSlideUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
```
|
|
|
|
### Scale & Fade (emphasis)
|
|
```css
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.8); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
```
|
|
|
|
### Hover feedback
|
|
```css
|
|
.interactive {
|
|
transition: transform 0.1s ease, opacity 0.1s ease;
|
|
}
|
|
.interactive:active {
|
|
transform: scale(0.95);
|
|
opacity: 0.8;
|
|
}
|
|
```
|
|
|
|
## Staggered Animations
|
|
When animating multiple elements, stagger by 50-150ms per item:
|
|
```css
|
|
.card { animation-delay: calc(var(--index) * 0.1s); }
|
|
```
|
|
Max items in a stagger cascade: 6-8. Total cascade: under 1 second.
|
|
|
|
## Reduced Motion
|
|
Always respect `prefers-reduced-motion`. Provide instant transitions as fallback.
|
|
|
|
## Performance
|
|
- Only animate `transform` and `opacity` (GPU-composited)
|
|
- Use `will-change` sparingly, remove after animation
|
|
- Limit simultaneous animations
|
|
- Use `requestAnimationFrame` for JS animations
|
|
|
|
## Loading States
|
|
- Skeleton shimmer: 2s infinite, `linear-gradient` sweep
|
|
- Pulse: 2s infinite, opacity 1 → 0.5 → 1
|
|
- Spinner: 1s infinite linear rotation
|