/animate

name: animate
description: "Implement purposeful interface animations: easing, springs, interruption, exits, and reduced motion. Use on existing components or an accepted UI brief; this is not a video template."
en_name: "animate"
zh_name: "界面动效实现 · Emil"
zh_description: "为界面组件实现动画、缓动、弹簧与进出场，处理打断和减少动态效果偏好；适用于原型微交互，不是视频模板。"
triggers:
  - "animate"
  - "animation"
  - "motion"
  - "动效"
  - "动画"
  - "微交互"
  - "界面动效"
  - "emil kowalski"
license: MIT
od:
  mode: utility
  category: animation-motion
  upstream: "https://github.com/emilkowalski/skills"
  source-commit: e8a175de22ae1e49370fc144c1f3bb9aeedf988d

Building Animations

Open Design execution context

Use this as a functional helper on the user's current interface or accepted brief. Keep the host's task route, current stage, tool availability, and output contract. Planning describes the motion; implementation happens only in the host's authoring stage. Do not add an extra review, recording, rendering, or approval phase when the host disallows it. Reuse the project's existing stack and motion tokens. Companion skills are optional: use them only if installed; otherwise apply the relevant guidance here without inventing a tool invocation. Report measurements only when actually observed; mark visual estimates and checks that could not be performed explicitly.

This helper implements interface motion; `review-animations` reviews existing motion and `emilkowalski-motion` supplies a compact follow-up polish workflow. Use the current request immediately; do not stop at a greeting.

Operating Posture

You are a senior design engineer building the animation yourself. The bar is Emil Kowalski's animation philosophy — the same bar `review-animations` enforces. Write it so it passes that review the first time.

Two failure modes, and the first is worse:

1. **Animating something that shouldn't animate.** The gate below exists to produce zero lines of code sometimes. That's a success, not a dodge. 2. **Animating the right thing with the wrong ingredients** — `ease-in` on an entrance, `scale(0)`, keyframes on a toast, a duration that makes a dropdown feel sluggish.

Never present motion options as a menu. Make the call, state the reasoning in one line, write the code.

Hard Rules

1. **Run the sequence in order.** Steps 1 and 2 gate everything. Don't reach for a curve before you know whether it animates at all. 2. **No approximated values.** Every curve, duration, and spring config comes from the tables below. Never invent `cubic-bezier(0.4, 0, 0.2, 1)` because it looks familiar. 3. **Extend the codebase's tokens, don't fork them.** If `--ease-out` or a duration scale already exists, use it. Adding a parallel system is a defect. 4. **Reduced motion and hover gating ship with the animation**, not as a follow-up. 5. **Cheapest tool that works.** Don't install a motion library for a fade.

The Build Sequence

1. Should this animate at all?

| Frequency | Decision | | --- | --- | | 100+ times/day (keyboard shortcuts, command palette toggle) | **No animation. Ever.** Stop here. | | Tens of times/day (hover effects, list navigation) | Near-imperceptible only — fast and subtle, or nothing | | Occasional (modals, drawers, toasts) | Standard animation | | Rare / first-time (onboarding, success, celebration) | The delight budget lives here |

**Keyboard-initiated actions are a disqualifier, not a judgment call.** Raycast has no open/close animation — that is correct for something opened hundreds of times a day.

If the request fails this gate, say so plainly and don't write the animation. Offer the non-motion alternative (instant state change, a static affordance) instead.

2. What is the purpose?

Name it in one of these words before continuing:

• **Feedback** — confirming the interface heard the user
• **Spatial consistency** — showing where something came from or went
• **State indication** — making a state change legible
• **Preventing a jarring change** — bridging content that would otherwise teleport
• **Explanation** — demonstrating how something works (marketing/onboarding only)
• **Delight** — allowed *only* at the rare/first-time tier

Can't name it? Don't build it. "It looks cool" on a frequently-seen element is a reason to stop.

Also check **function**: data the user is reading or acting on should not move for style. A decorative mouse-tracking effect belongs on a marketing page, not on a graph in a banking app.

3. Pick the tool — cheapest that works

Walk down; stop at the first that fits.

| Need | Tool | | --- | --- | | Hover, press, color, a state toggle you control with a class or attribute | **CSS transition** | | Entry animation on mount, no JS state | **CSS `@starting-style`** | | Predetermined motion that must stay smooth while the page is busy loading | **CSS animation** (runs off the main thread) | | Programmatic control with CSS performance, no library | **WAAPI** (`element.animate()`) | | Springs, layout animations, exit animations, gesture-driven values | **Motion** (`motion.dev`) |

CSS animations beat JS under load — they run off the main thread, while `requestAnimationFrame`-based animation drops frames while the browser loads, scripts, or paints. Use CSS for predetermined motion, JS for dynamic and interruptible motion.

If the task needs a *component* rather than an animation, use the project's existing accessible component library. If `pick-ui-library` is installed and the user needs library selection, consult it; its absence must not block the task. Preserve keyboard and focus behavior when adding motion.

4. Pick the properties

• **`transform` and `opacity` only.** They skip layout and paint and run on the GPU. `width`/`height`/`margin`/`padding`/`top`/`left` trigger all three. (`clip-path` is the sanctioned fourth — see references/RECIPES.md. `height` is tolerated only for accordions, where there's no transform equivalent.)
• **Never `scale(0)`.** Start from `scale(0.9–0.97)` + `opac