| name | animation-vocabulary |
| description | Reverse-lookup glossary that turns a vague description of a web animation into its exact term. Use when the user asks "what's it called when…". |
Animation Vocabulary
Turn a vague description into the precise term.
Quick Start
**Stagger** — Animate several items one after another with a small delay between each, creating a cascade.
Instructions
- Read for intent, not keywords.
- Quote the glossary verbatim.
- Disambiguate close terms.
- When nothing matches, name the closest term.
- Stay within this glossary.
- Keep it tight — lead with the term.
Examples
Popover grows from button:
**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it.
One image turns into another:
**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.
Alternates:
- **Crossfade** — fade over each other in the same spot.
- **Shared element transition** — travels and transforms from one position into another.
iOS rubber-band scroll:
**Rubber-banding** — Resistance and snap-back when you drag past a boundary.
Glossary
Entrances & Exits
- Fade in / Fade out — Change opacity.
- Slide in — Enter from off-screen.
- Scale in — Grow from smaller to full size.
- Pop in — Appear with slight overshoot.
- Reveal — Uncover gradually via clip-path or mask.
Sequencing & Timing
- Keyframes — Defined animation points (0%, 50%, 100%).
- Interpolation / Tween — In-between frames.
- Stagger — Delayed cascade.
- Orchestration — Coordinated multi-animation timing.
Movement & Transforms
- Translate — Move along X or Y.
- Scale — Bigger or smaller.
- Rotate — Spin around a point.
- 3D tilt / Flip — Rotate in 3D space.
- Transform origin — Anchor point for transforms.
- Origin-aware animation — Animate from trigger, not center.
Transitions Between States
- Crossfade — Fade out one, fade in another.
- Morph — Shape smoothly turns into another.
- Shared element transition — Element travels between positions.
- Layout animation — Animate to new position instead of snap.
- Accordion / Collapse — Smooth height expand/collapse.
- Direction-aware transition — Slide forward/back based on direction.
Scroll
- Scroll reveal — Fade/slide into viewport.
- Scroll-driven animation — Progress tied to scroll position.
- Parallax — Different speeds for depth.
- View transition — Browser morphs between states.
Feedback & Interaction
- Press / Tap feedback — Subtle scale-down on click.
- Hold to confirm — Progress fill while holding.
- Drag — Move by grabbing, with momentum.
- Swipe to dismiss — Drag off-screen to close.
- Rubber-banding — Resistance at boundary.
Easing
- Ease-out — Starts fast, ends slow. Default for UI.
- Ease-in — Starts slow, ends fast. Avoid.
- Ease-in-out — Slow, fast, slow.
- Cubic-bezier — Custom easing curve.
- Asymmetric easing — Different accel/decel rates.
Spring Animations
- Spring — Physics-driven motion.
- Stiffness — How strongly it pulls toward target.
- Damping — How quickly it settles.
- Bounce — Overshoots and settles.
- Momentum — Carries velocity after drag.
- Interruptible animation — Redirectable mid-flight.
Polish & Effects
- Blur — Soften or mask imperfections.
- Clip-path — Clip to shape for reveals.
- Mask — Soft-edge hiding/revealing.
- Skeleton / Shimmer — Loading placeholder.
Performance
- Frame rate (FPS) — 60fps baseline, 120fps on newer displays.
- Jank — Visible stutter from dropped frames.
- Compositing — GPU-only layer animation.
- will-change — Hint for browser layer promotion.
Principles
- Purposeful animation — Serve a function, not decorate.
- Frequency of use — More frequent = shorter and subtler.
- Spatial consistency — Keep identity across states.
- Hardware acceleration —
transform and opacity only.
- Reduced motion — Respect
prefers-reduced-motion.
