Reference

The vocabulary of motion.

91 terms for describing animation — each one shown, not just told. Useful for briefing a designer, prompting an AI, or finally putting a name to that thing the Dynamic Island does.

The term list is adapted from Emil Kowalski’s animation vocabulary at animations.dev. own.

Entrances & Exits

How elements arrive on screen, and how they leave.

Fade in / Fade out

Bringing an element on or off screen with opacity alone. The quietest entrance there is — and the right default for most UI.

Slide in

The element travels in from outside its resting position — left, right, top, or bottom — usually paired with a fade so it never hard-pops at the edge.

Scale in

The element starts smaller and grows to its final size while fading in. Reads as 'this came from somewhere' rather than 'this just switched on.'

Pop in

A scale-in that overshoots past 100% before settling back. The little bounce gives the entrance personality — use sparingly.

Reveal

Uncovering content progressively instead of fading it, typically by animating a clip-path or mask across the element.

Enter / Exit

The pair of animations an element plays when it mounts and unmounts. Exits are routinely forgotten — elements deserve a goodbye, not deletion.

Sequencing & Timing

Coordinating multiple elements, or multiple moments, in time.

Keyframes

Named waypoints in an animation (0%, 50%, 100%). You define the stops; the browser drives between them.

Interpolation / Tween

Computing every in-between frame from a start value to an end value, so motion reads as continuous instead of jumping between states.

Stagger

Offsetting the start of each item in a group by a small delay, so they cascade in rather than arriving as one block.

Timing & duration

Orchestration

Choreographing several animations so they read as one intentional movement rather than a pile of coincidences.

Delay

The wait before an animation begins counting.

Duration

How long the animation runs from start to finish. In UI, shorter than you think: 200–300ms covers most of it.

Timing & duration

Fill mode

What styles an element wears outside the animation window — e.g. `forwards` keeps the last frame applied instead of snapping back to where it started.

Stepped animation

Motion quantized into discrete jumps instead of smooth interpolation — the movement of a countdown, a clock hand, a frame-by-frame sprite.

Movement & Transforms

Changing where an element is, how big it is, and which way it points.

Translate

Moving an element along the X or Y axis without affecting layout.

Scale

Growing or shrinking an element relative to its rendered size.

Rotate

Spinning an element around an anchor point.

Skew

Shearing an element along an axis so its rectangle leans — the italics of transforms.

3D tilt / Flip

Rotating around the X or Y axis (rotateX / rotateY) so the element turns through space instead of spinning flat.

Perspective

The lens for 3D transforms. Lower values put the viewer closer and exaggerate depth; higher values flatten it out.

Transform origin

The fixed point a rotation pivots around or a scale grows from. Center is the default; moving it changes the story the motion tells.

Origin-aware animation

Growing an element out of whatever triggered it — a popover unfolding from its button instead of inflating from its own center.

Transitions Between States

Connecting one state, view, or element to the next.

Crossfade

Old content fades out while new content fades in, occupying the same spot. The simplest honest state change.

Continuity transition

A change staged so the user never loses the thread — the same element visibly becomes its next state instead of being swapped for a stranger.

Morph

One shape flowing into another — think of how the Dynamic Island stretches between its forms.

Shared element transition

An element journeys from its place in one view into its place in the next — a thumbnail traveling outward into a full card.

Layout animations & FLIP

Layout animation

When size or position changes, the element glides to its new home instead of teleporting. Usually implemented with the FLIP technique.

Layout animations & FLIP

Accordion / Collapse

A section animating its height open and closed to show or hide content.

Direction-aware transition

Forward navigation slides one way, back navigation slides the other — so the interface has a geography you can feel.

Scroll

Motion driven by, or triggered by, scrolling.

Scroll reveal

Elements animate into place the moment they enter the viewport — triggered once by scroll, then they run on their own clock.

Scroll-driven animation

The scrollbar is the playhead: animation progress maps directly to scroll position, scrubbing forward and backward with the user.

Scroll-linked principle

Parallax

Layers translating at different rates as you scroll, borrowing the depth cue your eyes use out the window of a moving car.

Parallax principle

Page transition

The animation bridging one page or route and the next during navigation.

View transition

The browser-native version of a page transition (the View Transitions API): it snapshots both states and morphs between them, carrying shared elements across.

Feedback & Interaction

Motion that answers the user's hands. Try these — they respond.

Hover effect

A visual response to the cursor passing over an element — the interface's way of saying 'yes, this is alive.'

Hover states principle

Press / Tap feedback

A slight scale-down while pressed, releasing back on release. Borrowed physicality that makes a flat rectangle feel like a button.

Gesture response principle

Hold to confirm

A destructive or important action that charges up while the button is held, and cancels if released early. Time as a safety interlock.

Drag

Grabbing an element and moving it directly, with the element keeping its momentum when you let go.

Drag momentum principle

Drag to reorder

Dragging an item through a list while its neighbors step aside in real time to show where it will land.

Swipe to dismiss

Flicking an element off-screen to close it — toasts, sheets, notification cards. The gesture and the exit are one motion.

Rubber-banding

Growing resistance when you drag past a boundary, then a springy snap back on release — the signature iOS overscroll feel.

Shake / Wiggle

A fast side-to-side jitter that reads as 'no' — wrong password, rejected input, invalid move.

Ripple

A circle expanding outward from the touch point, confirming exactly where the press registered. Material Design's calling card.

Easing

How speed is distributed across an animation.

Easing

The acceleration profile of an animation — where in its journey it moves fast and where it moves slow. The single biggest lever on how motion feels.

Easing lesson

Ease-out

Launches fast, lands gently. The workhorse of UI — anything responding to user input should move now and settle politely.

Ease out principle

Ease-in

Builds speed from a standstill. Feels hesitant on entrances, so it's mostly reserved for exits — things leaving can accelerate away.

Ease in principle

Ease-in-out

Slow, fast, slow. Suits elements already on screen relocating from A to B, where both endpoints deserve gentleness.

Linear

Constant speed, zero personality. Wrong for UI movement, exactly right for spinners, marquees, and progress tied to real work.

Cubic-bezier

A custom curve defined by two control points, when the built-in keywords aren't opinionated enough.

Asymmetric easing

A curve whose acceleration and deceleration don't mirror each other. Symmetric curves feel mechanical; asymmetry is where the life is.

Spring Animations

Physics instead of clocks — motion with mass and tension, no fixed duration.

Spring

Motion computed from physics — stiffness, damping, mass — rather than a duration and a curve. It ends when the physics settle.

Spring principle

Stiffness / Tension

How hard the spring pulls toward its target. Crank it up and motion gets snappy; lower it and everything relaxes.

Damping

The friction that bleeds energy out of a spring. Low damping oscillates playfully; high damping settles straight in.

Mass

How heavy the element behaves. Heavier mass means slower starts and longer settles — weight you can see.

Bounce

A spring tuned to overshoot its target and rebound before resting.

Elastic principle

Perceptual duration

When a spring feels finished versus when it mathematically stops — the eye signs off long before the micro-oscillation does.

Springs vs tweens

Momentum

Velocity that outlives the gesture — a flicked list keeps traveling and decelerates naturally instead of stopping with your finger.

Drag momentum principle

Velocity

Speed plus direction at a moment in time. Springs inherit it across animations, which is why a redirected element never visibly hiccups.

Interruptibility lesson

Interruptible animation

An animation that can be redirected mid-flight — carrying its current position and velocity into the new target instead of finishing first.

Interruptibility lesson

Looping & Ambient Motion

Animation that runs on its own, without being asked.

Marquee

Content scrolling past in an endless loop, usually a horizontal strip of text or logos.

Loop

An animation that repeats — a set number of times or forever — restarting from the beginning on each pass.

Alternate (yoyo)

A loop that plays forward, then backward, then forward again — no jump cut back to the start.

Orbit

One element circling another along a continuous path.

Pulse

A soft repeating swell of scale or opacity — the gentlest possible 'look over here.'

Float

A slow vertical drift, up and down forever, that makes a static element feel weightless rather than parked.

Idle animation

Barely-there motion an element plays while waiting to be used — a habit borrowed from game characters who shift their weight.

Polish & Effects

The details that separate shipped from crafted.

Blur

A blur filter softening an element — useful in transitions, where it hides interpolation artifacts the eye would otherwise catch.

Clip-path

Cutting an element to a shape with a hard edge. The mechanism behind most reveals and wipes.

Mask

Hiding or showing parts of an element through a shape or gradient — like clip-path, but the edges can be soft and fadeable.

Before / after slider

Two stacked images with a draggable divider wiping between them — the canonical comparison widget.

Line drawing

An SVG path animating its stroke from nothing to fully drawn, as if traced by an invisible pen.

Text morph

Text that changes character by character instead of swapping wholesale, pulling the eye to exactly what's new.

Skeleton / Shimmer

Placeholder shapes with a moving sheen while real content loads — the layout arrives first, the data catches up.

Number ticker

Digits rolling or counting up to their value instead of just appearing.

Tabular numbers

Fixed-width digits so values don't jitter sideways as they change. Non-negotiable for tickers, timers, and anything that counts.

Typewriter

Text arriving one character at a time, cursor and all.

Performance

What keeps motion at 60fps instead of stuttering.

Frame rate (FPS)

How many frames the browser draws per second. 60 is the floor for smooth motion; ProMotion-class displays run at 120.

Performance lesson

Jank

The visible stutter when the browser can't finish a frame in time and motion hitches instead of flowing.

Performance lesson

Dropped frame

A single frame the browser failed to deliver by its deadline. One is a blip; a cluster is jank.

Performance lesson

Compositing

Promoting an element to its own GPU layer so it can move or fade without the browser re-running layout or paint.

Performance lesson

will-change

A CSS heads-up that a property is about to animate, letting the browser prepare a layer before the first frame instead of during it.

Performance lesson

Layout thrashing

Animating geometry properties (width, height, top, left) that force a full layout pass every frame — the most common self-inflicted jank.

Performance lesson

Principles to Know

The judgment layer — when to animate, and how much.

Purposeful animation

Every animation should do a job — orient the user, acknowledge an action, explain a relationship. Decoration is not a job.

Why motion exists in UI

Anticipation

A small move opposite to the main action before it happens — the crouch before the jump that lets the eye prepare.

Anticipation principle

Follow-through

Parts of an element overshooting and settling after the main body stops. Nothing with weight halts all at once.

Follow-through principle

Squash & stretch

Deforming an element with its motion — flattening on impact, elongating at speed — to communicate weight and flexibility.

Squash & stretch principle

Perceived performance

The right motion makes an interface feel faster than it measures. Skeletons, optimistic updates, and entrances all buy perceived time.

Why motion exists in UI

Frequency of use

The more often an animation is seen, the shorter and subtler it must be. Delight on first encounter is friction on the hundredth.

Timing & duration

Spatial consistency

Elements keep their identity and trajectory across states, so the user always knows where things went and where they came from.

Layout animations & FLIP

Hardware acceleration

Sticking to transform and opacity so the GPU can carry the animation while the CPU stays out of the hot path.

Performance lesson

Reduced motion

Honoring prefers-reduced-motion by replacing large movement with fades or nothing at all. Motion is a preference, not a mandate.

Accessibility & restraint

Reference

The vocabulary of motion.

91 terms for describing animation — each one shown, not just told. Useful for briefing a designer, prompting an AI, or finally putting a name to that thing the Dynamic Island does.

The term list is adapted from Emil Kowalski’s animation vocabulary at animations.dev. own.

Entrances & Exits

How elements arrive on screen, and how they leave.

Fade in / Fade out

Bringing an element on or off screen with opacity alone. The quietest entrance there is — and the right default for most UI.

Slide in

The element travels in from outside its resting position — left, right, top, or bottom — usually paired with a fade so it never hard-pops at the edge.

Scale in

The element starts smaller and grows to its final size while fading in. Reads as 'this came from somewhere' rather than 'this just switched on.'

Pop in

A scale-in that overshoots past 100% before settling back. The little bounce gives the entrance personality — use sparingly.

Reveal

Uncovering content progressively instead of fading it, typically by animating a clip-path or mask across the element.

Enter / Exit

The pair of animations an element plays when it mounts and unmounts. Exits are routinely forgotten — elements deserve a goodbye, not deletion.

Sequencing & Timing

Coordinating multiple elements, or multiple moments, in time.

Keyframes

Named waypoints in an animation (0%, 50%, 100%). You define the stops; the browser drives between them.

Interpolation / Tween

Computing every in-between frame from a start value to an end value, so motion reads as continuous instead of jumping between states.

Stagger

Offsetting the start of each item in a group by a small delay, so they cascade in rather than arriving as one block.

Timing & duration

Orchestration

Choreographing several animations so they read as one intentional movement rather than a pile of coincidences.

Delay

The wait before an animation begins counting.

Duration

How long the animation runs from start to finish. In UI, shorter than you think: 200–300ms covers most of it.

Timing & duration

Fill mode

What styles an element wears outside the animation window — e.g. `forwards` keeps the last frame applied instead of snapping back to where it started.

Stepped animation

Motion quantized into discrete jumps instead of smooth interpolation — the movement of a countdown, a clock hand, a frame-by-frame sprite.

Movement & Transforms

Changing where an element is, how big it is, and which way it points.

Translate

Moving an element along the X or Y axis without affecting layout.

Scale

Growing or shrinking an element relative to its rendered size.

Rotate

Spinning an element around an anchor point.

Skew

Shearing an element along an axis so its rectangle leans — the italics of transforms.

3D tilt / Flip

Rotating around the X or Y axis (rotateX / rotateY) so the element turns through space instead of spinning flat.

Perspective

The lens for 3D transforms. Lower values put the viewer closer and exaggerate depth; higher values flatten it out.

Transform origin

The fixed point a rotation pivots around or a scale grows from. Center is the default; moving it changes the story the motion tells.

Origin-aware animation

Growing an element out of whatever triggered it — a popover unfolding from its button instead of inflating from its own center.

Transitions Between States

Connecting one state, view, or element to the next.

Crossfade

Old content fades out while new content fades in, occupying the same spot. The simplest honest state change.

Continuity transition

A change staged so the user never loses the thread — the same element visibly becomes its next state instead of being swapped for a stranger.

Morph

One shape flowing into another — think of how the Dynamic Island stretches between its forms.

Shared element transition

An element journeys from its place in one view into its place in the next — a thumbnail traveling outward into a full card.

Layout animations & FLIP

Layout animation

When size or position changes, the element glides to its new home instead of teleporting. Usually implemented with the FLIP technique.

Layout animations & FLIP

Accordion / Collapse

A section animating its height open and closed to show or hide content.

Direction-aware transition

Forward navigation slides one way, back navigation slides the other — so the interface has a geography you can feel.

Scroll

Motion driven by, or triggered by, scrolling.

Scroll reveal

Elements animate into place the moment they enter the viewport — triggered once by scroll, then they run on their own clock.

Scroll-driven animation

The scrollbar is the playhead: animation progress maps directly to scroll position, scrubbing forward and backward with the user.

Scroll-linked principle

Parallax

Layers translating at different rates as you scroll, borrowing the depth cue your eyes use out the window of a moving car.

Parallax principle

Page transition

The animation bridging one page or route and the next during navigation.

View transition

The browser-native version of a page transition (the View Transitions API): it snapshots both states and morphs between them, carrying shared elements across.

Feedback & Interaction

Motion that answers the user's hands. Try these — they respond.

Hover effect

A visual response to the cursor passing over an element — the interface's way of saying 'yes, this is alive.'

Hover states principle

Press / Tap feedback

A slight scale-down while pressed, releasing back on release. Borrowed physicality that makes a flat rectangle feel like a button.

Gesture response principle

Hold to confirm

A destructive or important action that charges up while the button is held, and cancels if released early. Time as a safety interlock.

Drag

Grabbing an element and moving it directly, with the element keeping its momentum when you let go.

Drag momentum principle

Drag to reorder

Dragging an item through a list while its neighbors step aside in real time to show where it will land.

Swipe to dismiss

Flicking an element off-screen to close it — toasts, sheets, notification cards. The gesture and the exit are one motion.

Rubber-banding

Growing resistance when you drag past a boundary, then a springy snap back on release — the signature iOS overscroll feel.

Shake / Wiggle

A fast side-to-side jitter that reads as 'no' — wrong password, rejected input, invalid move.

Ripple

A circle expanding outward from the touch point, confirming exactly where the press registered. Material Design's calling card.

Easing

How speed is distributed across an animation.

Easing

The acceleration profile of an animation — where in its journey it moves fast and where it moves slow. The single biggest lever on how motion feels.

Easing lesson

Ease-out

Launches fast, lands gently. The workhorse of UI — anything responding to user input should move now and settle politely.

Ease out principle

Ease-in

Builds speed from a standstill. Feels hesitant on entrances, so it's mostly reserved for exits — things leaving can accelerate away.

Ease in principle

Ease-in-out

Slow, fast, slow. Suits elements already on screen relocating from A to B, where both endpoints deserve gentleness.

Linear

Constant speed, zero personality. Wrong for UI movement, exactly right for spinners, marquees, and progress tied to real work.

Cubic-bezier

A custom curve defined by two control points, when the built-in keywords aren't opinionated enough.

Asymmetric easing

A curve whose acceleration and deceleration don't mirror each other. Symmetric curves feel mechanical; asymmetry is where the life is.

Spring Animations

Physics instead of clocks — motion with mass and tension, no fixed duration.

Spring

Motion computed from physics — stiffness, damping, mass — rather than a duration and a curve. It ends when the physics settle.

Spring principle

Stiffness / Tension

How hard the spring pulls toward its target. Crank it up and motion gets snappy; lower it and everything relaxes.

Damping

The friction that bleeds energy out of a spring. Low damping oscillates playfully; high damping settles straight in.

Mass

How heavy the element behaves. Heavier mass means slower starts and longer settles — weight you can see.

Bounce

A spring tuned to overshoot its target and rebound before resting.

Elastic principle

Perceptual duration

When a spring feels finished versus when it mathematically stops — the eye signs off long before the micro-oscillation does.

Springs vs tweens

Momentum

Velocity that outlives the gesture — a flicked list keeps traveling and decelerates naturally instead of stopping with your finger.

Drag momentum principle

Velocity

Speed plus direction at a moment in time. Springs inherit it across animations, which is why a redirected element never visibly hiccups.

Interruptibility lesson

Interruptible animation

An animation that can be redirected mid-flight — carrying its current position and velocity into the new target instead of finishing first.

Interruptibility lesson

Looping & Ambient Motion

Animation that runs on its own, without being asked.

Marquee

Content scrolling past in an endless loop, usually a horizontal strip of text or logos.

Loop

An animation that repeats — a set number of times or forever — restarting from the beginning on each pass.

Alternate (yoyo)

A loop that plays forward, then backward, then forward again — no jump cut back to the start.

Orbit

One element circling another along a continuous path.

Pulse

A soft repeating swell of scale or opacity — the gentlest possible 'look over here.'

Float

A slow vertical drift, up and down forever, that makes a static element feel weightless rather than parked.

Idle animation

Barely-there motion an element plays while waiting to be used — a habit borrowed from game characters who shift their weight.

Polish & Effects

The details that separate shipped from crafted.

Blur

A blur filter softening an element — useful in transitions, where it hides interpolation artifacts the eye would otherwise catch.

Clip-path

Cutting an element to a shape with a hard edge. The mechanism behind most reveals and wipes.

Mask

Hiding or showing parts of an element through a shape or gradient — like clip-path, but the edges can be soft and fadeable.

Before / after slider

Two stacked images with a draggable divider wiping between them — the canonical comparison widget.

Line drawing

An SVG path animating its stroke from nothing to fully drawn, as if traced by an invisible pen.

Text morph

Text that changes character by character instead of swapping wholesale, pulling the eye to exactly what's new.

Skeleton / Shimmer

Placeholder shapes with a moving sheen while real content loads — the layout arrives first, the data catches up.

Number ticker

Digits rolling or counting up to their value instead of just appearing.

Tabular numbers

Fixed-width digits so values don't jitter sideways as they change. Non-negotiable for tickers, timers, and anything that counts.

Typewriter

Text arriving one character at a time, cursor and all.

Performance

What keeps motion at 60fps instead of stuttering.

Frame rate (FPS)

How many frames the browser draws per second. 60 is the floor for smooth motion; ProMotion-class displays run at 120.

Performance lesson

Jank

The visible stutter when the browser can't finish a frame in time and motion hitches instead of flowing.

Performance lesson

Dropped frame

A single frame the browser failed to deliver by its deadline. One is a blip; a cluster is jank.

Performance lesson

Compositing

Promoting an element to its own GPU layer so it can move or fade without the browser re-running layout or paint.

Performance lesson

will-change

A CSS heads-up that a property is about to animate, letting the browser prepare a layer before the first frame instead of during it.

Performance lesson

Layout thrashing

Animating geometry properties (width, height, top, left) that force a full layout pass every frame — the most common self-inflicted jank.

Performance lesson

Principles to Know

The judgment layer — when to animate, and how much.

Purposeful animation

Every animation should do a job — orient the user, acknowledge an action, explain a relationship. Decoration is not a job.

Why motion exists in UI

Anticipation

A small move opposite to the main action before it happens — the crouch before the jump that lets the eye prepare.

Anticipation principle

Follow-through

Parts of an element overshooting and settling after the main body stops. Nothing with weight halts all at once.

Follow-through principle

Squash & stretch

Deforming an element with its motion — flattening on impact, elongating at speed — to communicate weight and flexibility.

Squash & stretch principle

Perceived performance

The right motion makes an interface feel faster than it measures. Skeletons, optimistic updates, and entrances all buy perceived time.

Why motion exists in UI

Frequency of use

The more often an animation is seen, the shorter and subtler it must be. Delight on first encounter is friction on the hundredth.

Timing & duration

Spatial consistency

Elements keep their identity and trajectory across states, so the user always knows where things went and where they came from.

Layout animations & FLIP

Hardware acceleration

Sticking to transform and opacity so the GPU can carry the animation while the CPU stays out of the hot path.

Performance lesson

Reduced motion

Honoring prefers-reduced-motion by replacing large movement with fades or nothing at all. Motion is a preference, not a mandate.

Accessibility & restraint