52 lines
1.1 KiB
Markdown
52 lines
1.1 KiB
Markdown
|
# Animation — Frontend
|
||
|
|
|
||
|
|
## Priority
|
||
|
|
|
||
|
|
One orchestrated page load > scattered micro-interactions.
|
||
|
|
|
||
|
|
## High-Impact Moments
|
||
|
|
|
||
|
|
1. **Staggered hero reveals** — content fades in sequence
|
||
|
|
2. **Scroll-triggered sections** — elements enter on scroll
|
||
|
|
3. **Hover state surprises** — scale, shadow, color shift
|
||
|
|
4. **Page transitions** — smooth route changes
|
||
|
|
|
||
|
|
## Framer Motion Example
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
const container = {
|
||
|
|
hidden: { opacity: 0 },
|
||
|
|
show: {
|
||
|
|
opacity: 1,
|
||
|
|
transition: { staggerChildren: 0.1 }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const item = {
|
||
|
|
hidden: { opacity: 0, y: 20 },
|
||
|
|
show: { opacity: 1, y: 0 }
|
||
|
|
}
|
||
|
|
|
||
|
|
<motion.div variants={container} initial="hidden" animate="show">
|
||
|
|
{items.map(i => <motion.div key={i} variants={item} />)}
|
||
|
|
</motion.div>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Timing Guidelines
|
||
|
|
|
||
|
|
| Type | Duration |
|
||
|
|
|------|----------|
|
||
|
|
| Interactions (hover, click) | 150-300ms |
|
||
|
|
| Transitions (page, modal) | 300-500ms |
|
||
|
|
| Complex sequences | 500-800ms total |
|
||
|
|
|
||
|
|
## Accessibility
|
||
|
|
|
||
|
|
Always respect `prefers-reduced-motion`:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media (prefers-reduced-motion: reduce) {
|
||
|
|
* { animation-duration: 0.01ms !important; }
|
||
|
|
}
|
||
|
|
```
|