Animation Vocabulary

--- name: animation-vocabulary description: Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one. ---

# Animation Vocabulary

Turn a vague description of a motion or effect into the precise term, so the user knows what to ask for.

## Quick Start

The user describes an effect loosely. You return the matching term(s) in this format:

``` **Stagger** — Animate several items one after another with a small delay between each, creating a cascade. ```

If several terms could fit, list the best match first, then 1–2 alternates with a one-line note on how they differ.

## Instructions

1. **Read for intent, not keywords.** Users describe what they *see* or *feel* ("springy", "slides off", "draws itself in"), not the technical name. Map the sensation to the glossary below. 2. **Quote the glossary verbatim.** Its descriptions are authoritative — use them as-is, don't paraphrase. 3. **Disambiguate close terms.** When two compete (*Clip-path* vs *Mask*, *Pop in* vs *Bounce*, *Shared element transition* vs *Layout animation*), contrast them so the user can pick. 4. **When nothing matches exactly,** name the closest term and say plainly it's an approximation, or describe the effect in the glossary's vocabulary (e.g. "that's a *stagger* of *scale-in* entrances"). 5. **Stay within this glossary.** If a term genuinely isn't here, say so rather than inventing one — though you may explain the concept using these words. 6. **Keep it tight.** A naming question wants a name, not an essay. Lead with the term; expand only if asked.

## Examples

**Example 1 — feel-based** User: "What's it called when a popover seems to grow out of the button you clicked instead of from its middle?" Output: ``` **Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS. ```

**Example 2 — disambiguation** User: "The thing where one image turns into another image." Output: ``` **Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.

Close alternates: - **Crossfade** — if they simply fade over each other in the same spot. - **Shared element transition** — if an element travels and transforms from one position into another. ```

**Example 3 — physics feel** User: "That iOS scroll where it resists and snaps back when you pull too far." Output: ``` **Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel). ```

## Glossary

_A curated snapshot mirroring the project's `/vocabulary` page; keep the two in sync when either changes._

### Entrances & Exits — how elements appear and disappear - **Fade in / Fade out** — Element appears or disappears by changing opacity. - **Slide in** — Element enters by sliding in from off-screen (left, right, top, or bottom). - **Scale in** — Element grows from smaller to full size as it appears, often paired with a fade. - **Pop in** — Element appears with a slight overshoot, like it bounces into place. - **Reveal** — Content is uncovered gradually, often by animating a clip-path or mask. - **Enter / Exit** — The animation an element plays when it's added to or removed from the screen.

### Sequencing & Timing — coordinating multiple elements or moments - **Keyframes** — Defined points in an animation (0%, 50%, 100%) that the browser fills the gaps between. - **Interpolation / Tween** — Generating all the in-between frames between a start and end value, so motion is continuous. - **Stagger** — Animate several items one after another with a small delay between each, creating a cascade. - **Orchestration** — Deliberately timing multiple animations so they feel like one coordinated motion. - **Delay** — Time before an animation starts. - **Duration** — How long an animation takes. - **Fill mode** — Whether an element keeps its first or last frame's styles before the animation starts or after it ends (e.g. forwards). - **Stepped animation** — An animation that is divided into discrete steps, like a countdown timer.

### Movement & Transforms — changing an element's position, size, or angle - **Translate** — Move an element along the X or Y axis. - **Scale** — Make an element bigger or smaller. - **Rotate** — Spin an element around a point. - **Skew** — Slant an element along the X or Y axis, shearing it out of its rectangular shape. - **3D tilt / Flip** — Rotate in 3D space (rotateX / rotateY) to add depth. - **Perspective** — How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer. - **Transform origin** — The anchor point a scale or rotation grows or spins from. - **Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

### Transitions Between States — connecting one state, view, or element to another - **Crossfade** — One element fades out as another fades in, in the same spot. - **Continuity transition** — A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller. - **Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island. - **Shared element transition** — An element travels and transforms from one position into another, like a thumbnail expanding into a card. - **Layout animation** — When an element's size or position changes, it animates to the new spot instead of snapping. - **Accordion / Collapse** — A section smoothly expands and collapses its height to show or hide content. - **Direction-awa