animation-principleslisted
Install: claude install-skill phamlongh230-lgtm/yamtam-engine
## When to Use
- Use when: an animation exists but feels mechanical or lifeless
- Use when: a UI element needs to communicate weight, speed, or emotion
- Use when: building onboarding flows, success states, or playful micro-interactions
- Do NOT use for: performance problems — see fixing-motion-performance
- Do NOT use for: easing function selection — see motion-design
---
## The 12 Principles Applied to Web
### 1. Squash and Stretch — Conveys weight and elasticity
```tsx
// A button press feels "squishy" — like it has mass
<motion.button
whileTap={{ scaleX: 1.15, scaleY: 0.85 }} // squash horizontally
transition={{ type: 'spring', stiffness: 600, damping: 15 }}
>
Submit
</motion.button>
```
---
### 2. Anticipation — Prepares viewer for action
```tsx
// Card "winds up" before launching — feels deliberate, not sudden
<motion.div
whileHover={{ y: -2 }} // tiny upward movement prepares for lift
whileTap={{ y: 2, scale: 0.98 }} // press down before release
transition={{ duration: 0.1 }}
/>
```
---
### 3. Staging — Draw attention to what matters
```css
/* Stagger children so eye knows where to look first */
.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 60ms; }
.list-item:nth-child(3) { animation-delay: 120ms; }
```
```tsx
// Framer Motion stagger
const container = { hidden: {}, show: { transition: { staggerChildren: 0.06 } } };
const item = { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0 }