animation-systems

Category: Content & Multimedia | Uploader: guilhermemarketing | Downloads: 0 | Version: v1.0（Latest）

Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.

Changelog: Source: GitHub https://github.com/guilhermemarketing/gui-marketing-skills

Directory Structure

Current level: skills/animation-systems/

📄 SKILL.md 5.1 KB

SKILL.md

---
name: animation-systems
description: Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.
---

# 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)

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

animation-systems

Directory Structure

SKILL.md

Report

Notice