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.
  Source: github.com/emilkowalski/skills.
---

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

- **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.
- **Quote the glossary verbatim.** Its descriptions are authoritative — use them as-is, don't
  paraphrase.
- **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.
- **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").
- **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.
- **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?"
> **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."
> **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."
> **Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS
> overscroll feel).

## Glossary

### 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 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-aware transition** — Content slides one way going forward and the opposite way
  going back, so navigation has a sense of direction.

### Scroll — motion tied to scrolling or navigating between views
- **Scroll reveal** — Elements fade or slide into place as they enter the viewport.
- **Scroll-driven animation** — An animation whose progress is tied directly to scroll
  position.
- **Parallax** — Background and foreground move at different speeds while scrolling, creating
  depth.
- **Page transition** — An animation that plays when navigating from one page or route to
  another.
- **View transition** — The browser morphs between two states or pages, connecting shared
  elements.

### Feedback & Interaction — responding to the user's actions
- **Hover effect** — Visual change when the cursor moves over an element.
- **Press / Tap feedback** — A subtle scale-down when an element is clicked, so it feels
  physical.
- **Hold to confirm** — A progress effect that fills up while the user holds a button.
- **Drag** — Moving an element by grabbing it, often with momentum when released.
- **Drag to reorder** — Dragging items in a list to rearrange them, while the others shift to
  make room.
- **Swipe to dismiss** — Dragging an element off-screen to close it, like a drawer or toast.
- **Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS
  overscroll feel).
- **Shake / Wiggle** — A quick side-to-side jitter signaling an error or rejected input.
- **Ripple** — A circle expanding from the point of a tap, confirming the press.

### Easing — how speed changes over an animation
- **Easing** — The rate at which an animation speeds up or slows down.
- **Ease-out** — Starts fast, ends slow. The default for most UI and anything responding to
  the user.
- **Ease-in** — Starts slow, ends fast. Usually avoided; can feel sluggish.
- **Ease-in-out** — Slow, fast, slow. Good for elements already on screen moving from A to B.
- **Linear** — Constant speed. Avoid for UI; reserve for spinners or marquees.
- **Cubic-bezier** — A custom easing curve you define for precise control.
- **Asymmetric easing** — A curve that accelerates and decelerates at different rates. Feels
  more alive than a symmetric one.

### Spring Animations — physics-based motion as an alternative to fixed-duration easing
- **Spring** — Motion driven by physics (tension, mass, damping) rather than a set duration.
- **Stiffness / Tension** — How strongly the spring pulls toward its target. Higher feels
  snappier.
- **Damping** — How quickly a spring settles. Lower damping means more bounce and oscillation.
- **Mass** — How heavy the animated element feels. More mass makes it slower and more
  sluggish.
- **Bounce** — A spring that overshoots and settles, adding playfulness.
- **Perceptual duration** — How long a spring feels finished, even though it keeps
  micro-settling underneath.
- **Momentum** — Motion that carries velocity, especially after a drag or interruption.
- **Velocity** — How fast and in which direction an element is moving. A spring carries it
  into the next animation when interrupted, so a flicked element keeps its speed.
- **Interruptible animation** — An animation that can be smoothly redirected mid-flight
  instead of finishing first.

### Looping & Ambient Motion — animations that run on their own
- **Marquee** — Text or content that scrolls continuously in a loop.
- **Loop** — An animation that repeats, a set number of times or infinitely.
- **Alternate (yoyo)** — A loop that plays forward then reverses each iteration, instead of
  jumping back to the start.
- **Orbit** — An element circling around another in a continuous path.
- **Pulse** — A gentle repeating scale or opacity change to draw attention.
- **Float** — A gentle, continuous up-and-down drift that makes a static element feel alive
  and weightless.
- **Idle animation** — Subtle motion that plays while an element is just sitting there,
  waiting to be interacted with.

### Polish & Effects — the small touches that separate good from great
- **Blur** — A blur filter used to soften an element or mask tiny imperfections.
- **Clip-path** — Clipping an element to a shape, used for reveals, masks, and before/after
  sliders.
- **Mask** — Hiding or revealing parts of an element using a shape or gradient — like
  clip-path, but with soft, fadeable edges.
- **Before / after slider** — A draggable divider that wipes between two overlaid images to
  compare them.
- **Line drawing** — An SVG path that draws itself in, like an invisible pen tracing it.
- **Text morph** — Text that animates character by character when it changes, drawing
  attention to the new value.
- **Skeleton / Shimmer** — A placeholder with a moving sheen shown while content loads.
- **Number ticker** — Digits rolling or counting up to a value.
- **Tabular numbers** — Fixed-width digits so numbers don't shift around as they change.
  Essential for tickers, timers, and counters.
- **Typewriter** — Text appearing one character at a time, as if being typed.

### Performance — what keeps motion smooth instead of stuttering
- **Frame rate (FPS)** — Frames drawn per second. 60fps is the baseline for smooth motion;
  120fps on newer displays.
- **Jank** — Visible stutter when the browser drops frames because it can't keep up with the
  animation.
- **Dropped frame** — A frame the browser missed its deadline to draw, causing a tiny hitch in
  motion.
- **Compositing** — Letting the GPU move or fade an element on its own layer without redoing
  layout or paint.
- **will-change** — A CSS hint that an element is about to animate, so the browser can promote
  it to its own layer ahead of time.
- **Layout thrashing** — Animating properties like `width`, `height`, `top`, or `left` that
  force the browser to recalculate layout every frame, causing jank.

### Principles to Know — concepts that guide when and how to animate
- **Purposeful animation** — Motion should serve a function — orient, give feedback, show
  relationships — not just decorate.
- **Anticipation** — A small wind-up in the opposite direction before a move, hinting at
  what's about to happen.
- **Follow-through** — Parts of an element keep moving and settle slightly after the main
  motion stops, adding weight.
- **Squash & stretch** — Deforming an element as it moves to convey weight, speed, and
  flexibility.
- **Perceived performance** — The right animation makes an interface feel faster, even when it
  isn't.
- **Frequency of use** — The more often a user sees an animation, the shorter and subtler it
  should be.
- **Spatial consistency** — Animating so an element keeps its identity and position across
  states, so users never lose track of where things went.
- **Hardware acceleration** — Animating `transform` and `opacity` lets the GPU keep motion
  smooth.
- **Reduced motion** — Respecting the user's `prefers-reduced-motion` setting by toning down
  or removing motion.

## See Also

- `emil-design-eng` — where these terms are put into practice.
- `find-animation-opportunities` — for deciding whether an effect belongs somewhere at all.