Animation / Animation systems

# Animation / Animation systems

# Animation Systems (Stripe × Linear × Apple × Vercel)

This skill helps you ship **tasteful, product-grade motion**.
Not “more animation.”
**Better animation**: clarity, hierarchy, feedback, and delight—without jank.

---

## The goals (why motion exists)
Use animation to:
1) **Explain hierarchy** (what matters)
2) **Confirm action** (feedback)
3) **Guide attention** (where to look next)
4) **Maintain continuity** (spatial relationships)
5) **Add polish** (craft signals)

If an animation doesn’t serve one of these, delete it.

---

## The Stripe/Linear/Apple/Vercel style (shared traits)

### 1) Restraint
- Fewer animations, better chosen.
- One strong hero moment; the rest is supporting motion.

### 2) Clear choreography
- Primary element moves first.
- Secondary elements follow with small stagger.
- Motion establishes a “reading order.”

### 3) Physical but not cartoony
- Use easing that feels **human** (soft acceleration + gentle settle).
- Avoid bouncy defaults for serious product UI.

### 4) Texture + depth (subtle)
- Small parallax, soft shadows, blur fades, light beams.
- Avoid heavy 3D unless it’s the hero.

---

## Motion primitives (build these first)
Think in primitives you can reuse everywhere.

### A) Fade + rise (default entrance)
Use for: text blocks, cards, modals.
- Opacity: 0 → 1
- Y: 12–24px → 0
- Duration: 300–700ms depending on size

### B) Scale + fade (micro emphasis)
Use for: popovers, toasts, selected states.
- Scale: 0.98 → 1
- Opacity: 0 → 1

### C) Slide (navigation)
Use for: drawers, step transitions.
- Use transform translate; avoid animating layout.

### D) Morph / shared element (high craft)
Use for: tab indicators, expanding cards.
- Requires consistent geometry + measured layout.

---

## Defaults (practical numbers)
Use these as a starting system.

### Durations (rule of thumb)
- Micro (hover/press): **120–200ms**
- UI state change (toggle, select): **180–260ms**
- Small transitions (popover, toast): **220–320ms**
- Page section entrance: **400–800ms**
- Hero sequences: **800–1600ms** (with internal beats)

### Easing (safe set)
Pick a small set and reuse.
- UI: **ease-out** with gentle settle
- Emphasis: slightly stronger ease
- Entering: ease-out
- Exiting: ease-in (faster)

If implementing:
- Use your animation library’s “power2.out / expo.out” equivalents.
- Avoid elastic/bounce unless brand is playful.

### Stagger
- 40–90ms per element (text lines/cards)
- Use smaller stagger on mobile

---

## Choreography patterns

### 1) “Hero → supporting elements”
- Hero visual animates in first.
- Headline appears next.
- CTA appears last.

### 2) “Section reveal on scroll”
- Trigger when section is ~20–30% visible.
- Animate once (don’t replay on tiny scroll).

### 3) “Hover: lift + glow”
- Y: -2 to -6px
- Shadow: subtle increase
- Optional: border/gradient glow

### 4) “Focus ring + micro shift”
- For form fields: focus ring + tiny scale/translate for responsiveness.

---

## Performance rules (non‑negotiable)

### Animate the right properties
Prefer:
- `transform` (translate/scale/rotate)
- `opacity`

Avoid (unless necessary):
- width/height/top/left
- expensive filters on large areas

### Respect the GPU
- Clamp device pixel ratio in heavy canvases (1–2)
- Keep blur subtle and small
- Avoid many simultaneous animated shadows

### Reduce reflows
- Don’t measure layout every frame.
- For scroll effects, use a library that batches reads/writes.

---

## Accessibility: Reduced Motion
Always support `prefers-reduced-motion`.

Policy:
- Keep content visible.
- Replace motion with **instant state** + subtle opacity.
- Disable scroll-scrub/pin.

Ask the user:
- “Do you want a reduced-motion mode that disables all non-essential motion?”

---

## Implementation guidance (library-agnostic)

### For simple sites
- CSS transitions for small hovers/toggles.
- Use a single motion library (GSAP or Framer Motion) for complex sequences.

### For product sites
- Create a motion token set:
  - durations
  - easing curves
  - standard offsets (8/16/24px)
  - stagger defaults

### For hero moments
- Use timelines (or keyframes) with labeled beats.
- Lock camera/scene movement first, then layer text.

---

## What to ask the user
- What’s the brand lane: Stripe (polished), Linear (minimal), Apple (cinematic), Vercel (developer/product)?
- What are the key moments? (hero, scroll story, hover cards, nav transitions)
- Any performance constraints? (mobile, low-end devices)
- Reduced motion requirements?

---

## Output format (when asked to “add Stripe/Linear-style animation”)
Return:
1) Motion goals (what we’re trying to communicate)
2) Motion tokens (durations + easing + offsets)
3) A choreography plan (timeline beats)
4) Implementation notes (perf + reduced motion)
5) A small code recipe (CSS or GSAP/Framer depending on stack)