The Vocabulary of Motion

An element appears or disappears by changing opacity.

An element enters by sliding in from off-screen.

An element grows from smaller to full size, often paired with a fade.

An element appears with a slight overshoot, like it bounces into place.

Content is uncovered gradually, often by animating a clip-path or mask.

The animation an element plays when it's added to or removed from the screen.

Animate several items one after another with a small delay between each.

Deliberately timing multiple animations so they feel like one coordinated motion.

How long an animation takes.

Time before an animation starts.

Defined points in an animation (0%, 50%, 100%) that the browser fills the gaps between.

Generating all the in-between frames between a start and end value, so motion is continuous.

Whether an element keeps its first or last frame's styles before and after the animation runs.

An animation divided into discrete steps, like a clock's second hand or a countdown.

The rate at which an animation speeds up or slows down.

Starts fast, ends slow. The default for most UI and anything responding to the user.

Starts slow, ends fast. Usually avoided for UI; can feel sluggish.

Slow, fast, slow. Good for elements already on screen moving from A to B.

Constant speed. Avoid for UI; reserve for spinners or marquees.

A custom easing curve you define for precise control — here, an overshoot.

A curve that accelerates and decelerates at different rates.

Motion driven by physics — stiffness, damping, mass — instead of a fixed duration.

How strongly the spring pulls toward its target. Higher feels snappier.

How quickly a spring settles. Lower damping means more bounce and oscillation.

How heavy the animated element feels. More mass makes it slower.

A spring that overshoots and settles, adding playfulness.

An animation that can be smoothly redirected mid-flight instead of finishing first.

How long a spring feels finished, even though it keeps micro-settling.

Motion that carries velocity, especially after a drag or interruption.

How fast and in which direction an element is moving.

Move an element along the X or Y axis.

Make an element bigger or smaller.

Spin an element around a point.

Slant an element along the X or Y axis, shearing it out of its rectangle.

Rotate in 3D space (rotateX / rotateY) under a perspective to add depth.

How strong the 3D effect looks — a lower value exaggerates depth.

The anchor point a scale or rotation grows or spins from.

Elements animate from their trigger rather than from their own center.

When an element's size or position changes, it animates to the new spot instead of snapping.

A section smoothly expands and collapses its height to show or hide content.

One shape smoothly turns into another shape, e.g. the Dynamic Island.

An element travels and transforms from one position into another.

Content slides one way going forward and the opposite way going back.

One element fades out as another fades in, in the same spot.

A change that keeps the user oriented by visually connecting before and after.

A horizontal pager that slides and snaps between slides, with dot indicators.

Elements fade or slide into place as they enter the viewport.

An animation whose progress is tied directly to scroll position.

Background and foreground move at different speeds while scrolling, creating depth.

An animation that plays when navigating from one page or route to another.

The browser morphs between two states or pages, connecting shared elements.

A visual change when the cursor moves over an element.

A subtle scale-down when an element is clicked, so it feels physical.

A progress effect that fills up while the user holds a button.

Moving an element by grabbing it, with elastic constraints.

Dragging items in a list to rearrange them, while the others shift.

Dragging an element off-screen to close it, like a drawer or toast.

Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).

A quick side-to-side jitter signaling an error or rejected input.

A circle expanding from the point of a tap, confirming the press.

A small label that fades and scales in from its anchor on hover or focus.

Drag a list down past the top to trigger a refresh, with a spinner that appears as you pull.

Text or content that scrolls continuously in a loop.

An animation that repeats, a set number of times or infinitely.

A loop that plays forward then reverses each iteration.

An element circling around another in a continuous path.

A gentle repeating scale or opacity change to draw attention.

A gentle, continuous up-and-down drift that makes a static element feel alive.

Subtle motion that plays while an element is just sitting there.

A blur filter used to soften an element or mask tiny imperfections.

Clipping an element to a shape, used for reveals, masks, and before/after sliders.

Revealing parts of an element using a shape or gradient — like clip-path, but with soft edges.

A draggable divider that wipes between two overlaid images to compare them.

An SVG path that draws itself in, like an invisible pen tracing it.

Text that animates character by character when it changes.

Text appearing one character at a time, as if being typed.

Digits rolling or counting up to a value.

Fixed-width digits so numbers don't shift around as they change.

A placeholder with a moving sheen shown while content loads.

A burst of particles that fly out and fall — a celebratory success moment.

A determinate bar that fills toward a value, or an indeterminate sweep when the duration is unknown.

A small wind-up in the opposite direction before a move, hinting at what's about to happen.

Looser parts keep moving and settle slightly after the main element stops.

Deforming an element as it moves to convey weight, speed, and flexibility.