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:

• Explain hierarchy (what matters)

• Confirm action (feedback)

• Guide attention (where to look next)

• Maintain continuity (spatial relationships)

• 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:

• Motion goals (what we’re trying to communicate)

• Motion tokens (durations + easing + offsets)

• A choreography plan (timeline beats)

• Implementation notes (perf + reduced motion)

• A small code recipe (CSS or GSAP/Framer depending on stack)