Animation Vocabulary

The working vocabulary of UI motion. Around 80 terms for entrances, easing, springs, transitions, scroll, and performance, so you can name the exact motion you want instead of asking for 'smoother'.

All Dictionary

Why this exists

Motion is a language, and most teams never learn the words. So feedback stays vague. “Make it smoother.” “Give it more life.” “That feels off.” None of it is briefable, so it gets built three times and still feels wrong.

When you can name the motion, you can brief it. To an engineer, to your design system, to an AI model. “Ease-out, 200ms, transform only” produces the exact thing. “Smoother” produces a guess. This is the working vocabulary of UI motion, grouped so you can find the word you need.

See it move

Easing

Same distance, same time. Only the curve changes. Hit replay and watch them separate.

ease-out
ease-in-out
ease-in
linear

Stagger

The same entrance, offset by a small delay per item. That offset is the whole effect.

Feedback

No replay needed. Hover the card, then press the button. The interface answers you.

Transforms

The four moves the GPU does cheaply. Toggle one, then flip the origin and scale again.

Part of a path. This glossary is the companion to the Motion & Animation path — five short, hands-on lessons that put these words to work, each with a demo you can replay. Start there if you want a guided sequence instead of a reference.

Easing

The shape of motion. The biggest lever on how anything feels.

  • Easing: the rate a motion speeds up and slows down over its duration.
  • Ease-out: starts fast, ends slow. The default for most UI, especially anything entering or responding to a click.
  • Ease-in: starts slow, ends fast. Avoided on its own. It feels sluggish for things the user is waiting on.
  • Ease-in-out: slow, fast, slow. Right for an element moving from one place to another on screen.
  • Linear: constant speed. Reserve it for spinners and marquees, never for entrances.
  • Cubic-bezier: a custom easing curve for when the presets are not precise enough.
  • Asymmetric easing: a curve that accelerates and decelerates at different rates, so the exit is not a mirror of the entrance.

Duration and timing

  • Duration: how long a motion takes. Most UI lives in 150 to 300ms.
  • Delay: time before a motion starts.
  • Keyframes: defined points in an animation, like 0%, 50%, 100%, that the browser fills the gaps between.
  • Interpolation (tween): generating all the in-between frames from a start value to an end value.
  • Stagger: animating several items one after another with a small delay between each.
  • Orchestration: deliberately timing multiple animations so they feel coordinated rather than simultaneous.
  • Fill mode: whether an element holds its first or last frame’s styles before and after the animation runs.
  • Stepped animation: motion split into discrete jumps instead of a smooth glide, like a countdown.

Entrances and exits

  • Fade in / out: appear or disappear by changing opacity.
  • Slide in: enter by moving in from off-screen.
  • Scale in: grow from smaller to full size on appear.
  • Pop in: appear with a slight overshoot, like it lands into place.
  • Reveal: uncover content gradually, usually by animating a clip-path or mask.
  • Enter / exit: the motion that plays as elements are added to or removed from the page. Exits should run faster than entrances.

Movement and transforms

  • Translate: move along the X or Y axis.
  • Scale: make bigger or smaller.
  • Rotate: spin around a point.
  • Skew: slant along an axis, shearing the element.
  • 3D tilt / flip: rotate in 3D space with rotateX or rotateY to add depth.
  • Perspective: how strong the 3D effect reads. A lower value exaggerates the depth.
  • Transform origin: the anchor point a scale or rotation grows or spins from.
  • Origin-aware animation: an element animates out from whatever triggered it, not from its own center.

Transitions between states

  • 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.
  • Morph: one shape smoothly becomes another.
  • Shared element transition: an element travels and transforms from one position into another across views.
  • 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.
  • Direction-aware transition: content slides one way going forward and the opposite way going back.

Scroll

  • Scroll reveal: elements fade or slide into place as they enter the viewport.
  • Scroll-driven animation: progress tied directly to scroll position rather than to time.
  • Parallax: background and foreground move at different speeds while scrolling.
  • Page transition: motion when navigating between pages.
  • View transition: the browser morphs between two states or pages, connecting shared elements.

Feedback and interaction

  • Hover effect: a visual change when the cursor moves over an element.
  • Press / tap feedback: a subtle scale-down on click so the element feels physical.
  • Hold to confirm: a progress effect that fills while the user holds a button.
  • Drag: moving an element by grabbing it, often with momentum on release.
  • Drag to reorder: dragging items in a list to rearrange them.
  • Swipe to dismiss: dragging an element off-screen to close it.
  • Rubber-banding: resistance and snap-back when you drag past a boundary.
  • Shake / wiggle: a quick side-to-side jitter signalling an error or rejected input.
  • Ripple: a circle expanding from the point of a tap, confirming the press.

Springs

Physics-based motion. Instead of a fixed duration, you describe the forces and let the system settle.

  • Spring: motion driven by physics, defined by tension, mass, and damping.
  • Stiffness (tension): how strongly the spring pulls toward its target.
  • Damping: how quickly it settles. Lower damping means more bounce.
  • Mass: how heavy the element feels.
  • Bounce: a spring that overshoots and settles, adding playfulness.
  • Perceptual duration: how long a spring feels finished, which is shorter than when it technically stops.
  • Momentum: motion that carries velocity, especially after a drag.
  • Velocity: how fast and in which direction something is moving right now.
  • Interruptible animation: motion that can be smoothly redirected mid-flight instead of finishing first.

Looping and ambient motion

  • Marquee: content scrolling continuously in a loop.
  • Loop: motion that repeats infinitely or a set number of times.
  • Alternate (yoyo): a loop that plays forward, then reverses each iteration.
  • Orbit: an element circling another in a continuous path.
  • Pulse: a gentle repeating scale or opacity change to draw attention.
  • Float: a slow, continuous up-and-down drift that makes an element feel alive.
  • Idle animation: subtle motion that plays while an element is just sitting there.

Polish and effects

  • Blur: a blur filter to soften an element or mask imperfections.
  • Clip-path: clipping an element to a shape, used for reveals and masks.
  • Mask: hiding or revealing parts of an element with a shape or gradient.
  • Before / after slider: a draggable divider that wipes between two overlaid images.
  • Line drawing: an SVG path that draws itself in, like an invisible pen.
  • Text morph: text that animates character by character as it changes.
  • 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 do not shift around as they change.
  • Typewriter: text appearing one character at a time.

Performance

  • Frame rate (FPS): frames drawn per second. 60fps is the baseline, 120fps on newer displays.
  • Jank: visible stutter when the browser drops frames.
  • Dropped frame: a frame the browser missed its deadline to draw.
  • Compositing: letting the GPU move or fade an element on its own layer.
  • will-change: a CSS hint that an element is about to animate, so the browser can prepare.
  • Layout thrashing: animating properties that force the browser to recalculate layout every frame. The thing to avoid.

Principles to know

  • Purposeful animation: motion should do a job. Orient, give feedback, or show a relationship. If it does none of those, cut it.
  • Anticipation: a small wind-up in the opposite direction before a move.
  • Follow-through: parts of an element keep moving and settle slightly after the main motion stops.
  • Squash and stretch: deforming an element as it moves to convey weight and speed.
  • Perceived performance: the right motion makes an interface feel faster, even when it is not.
  • Frequency of use: the more often a user sees a motion, the shorter and subtler it should be.
  • Spatial consistency: animate so an element keeps its identity and position across states.
  • Hardware acceleration: animating transform and opacity lets the GPU keep motion smooth.
  • Reduced motion: respect the user’s prefers-reduced-motion setting. Some people get motion sick from what you find delightful.

How to use this

Pick the smallest word that says what you mean, then add the numbers. “Scroll reveal, fade-up, ease-out, 300ms, staggered by 80ms” is a complete brief. An engineer can build it, a design system can encode it, and an AI model can write it. “Make it pop” cannot.

When in doubt, animate transform and opacity only, keep it under 300ms, make exits faster than entrances, and respect reduced motion.

Vocabulary adapted from Emil Kowalski’s animations.dev. Definitions rewritten here for designers working with AI.