motion

Rotating a card in perspective toward the pointer so it appears to tip in three dimensions, often with a moving highlight to sell the depth.

Composing an animation on top of whatever is already animating the same property instead of replacing it, so a second nudge adds to the first rather than restarting it.

A small move in the opposite direction just before the main one, borrowed from character animation to telegraph what is about to happen.

Moving an element along a curved path rather than a straight line, so a change of position reads as natural rather than mechanical.

Giving a state change and its reverse different curves or durations, usually a quick confident exit and a slower entrance, so the two directions do not feel identical.

A self-playing loop an idle screen falls into to demonstrate itself, inherited from arcade cabinets and reused by kiosks and product demos.

Motion that arrives, rebounds, and arrives again in decreasing amounts, reading as an object landing on a surface.

Rotating a card about its own axis to show a second face on the back, with the hidden face pre-rotated and its backface hidden so only one side is ever visible.

Spawning a new element visibly out of an existing one so the reader can see where it came from, rather than having it arrive from nowhere.

A header that shrinks as the page scrolls, trading its large title and image for a compact bar that stays available.

An animation limited to properties the compositor can handle alone, usually transform and opacity, so it keeps running even when the main thread is busy.

A short particle celebration thrown across the screen to mark a completion, decorative by design and the first thing reduced motion should drop.

Material's transition in which a container grows or shrinks into another one, its contents crossfading inside, so a card visibly becomes the screen it opened.

Animating a number toward its value instead of setting it, often with digits rolling like an odometer so the change is legible.

A transition in which one element fades out while the other fades in over the same span, so both are partly visible at the midpoint.

The four-control-point curve that describes how a value moves between its start and end, the default way CSS spells an easing.

A dot or ring that trails the pointer with a lag and often swells over links, replacing or augmenting the native cursor as a piece of brand motion.

The friction term in a spring that decides how quickly oscillation dies out, from a loose wobble to a critically damped move with no bounce at all.

A style where controls behave like soft matter, squashing under a press and springing back past rest, so the surface reads as jelly, clay, or inflated plastic rather than paint.

The wait between an animation being triggered and starting to move, the unit a stagger is built from and the difference between twitchy and considered.

Giving interface objects a believable place in depth by folding, layering or flipping them, so a reader can tell where something went and where it will come back from.

The rule that every movement carries a direction, and that using it consistently tells the reader how the parts of an interface relate.

A fade that carries the eye from one image or state to another without any movement, inherited from film editing vocabulary.

Scaling each item in a row by how close the pointer is to it, so the item under the cursor swells, its neighbours ramp down, and the row reads as bulging.

Borrowing the camera's vocabulary: dolly moves the viewer through the scene, zoom scales the scene itself, and the interface reads as travelling rather than rearranging.

How long a transition takes from start to finish, measured separately from the shape of its easing.

The rate of change across an animation, deciding how it accelerates and settles rather than how long it takes.

The motion an element plays as it arrives, running from a starting style that only exists before the element was ever rendered.

The motion an element plays on its way out, which requires deferring its removal from the layout until the animation has finished.

A change in opacity used to bring an element in or take it out, the cheapest transition and the one that implies no spatial relationship.

Material's transition for unrelated views: the outgoing view fades out completely before the incoming one fades in while scaling up slightly.

Whether an animation's first or last keyframe styles apply outside its running window, which decides if an element snaps back when it finishes or stays where it landed.

A technique that measures an element's first and last positions, inverts the difference with a transform, then plays it off, so layout changes animate cheaply.

A slow continuous up and down drift on an idle element, so a static composition keeps breathing without asking for attention.

Parts of a composition that keep moving briefly after the main element stops, and start slightly after it starts, so a group does not move as one rigid block.

How many frames a second the interface actually draws, the budget every animation spends: 60fps leaves about 16ms per frame and a 120Hz display halves it.

Blurring a group of shapes and then crushing the blur back to a hard edge so overlapping elements merge into one liquid silhouette as they move apart and together.

Animating a container between collapsed and its content's natural size, long impossible because height auto did not interpolate and now opened up by interpolate-size and calc-size().

A card or button that rises a few pixels and deepens its shadow while the pointer is over it, so the whole surface reads as lifted toward the reader.

An icon that animates between two meanings rather than cutting, such as a hamburger whose bars rotate into a close cross.

A transition whose progress is held by an ongoing gesture, so the reader can drag it partway, hesitate, and either complete it or send it back.

The rule that produces the intermediate values between two endpoints, which is why some properties can animate smoothly and others can only switch.

Motion that can be caught, reversed, or redirected mid-flight from its current value, instead of finishing before it will accept a new input.

Visible stutter in motion caused by frames arriving late or not at all, so an animation that should be continuous reads as juddering.

An editing state announced by making every rearrangeable item wobble in place, so the whole screen says it can be reordered.

A slow pan and zoom across a still image that gives it motion, named after the documentary filmmaker who made the technique famous.

A point in an animation where a value is pinned, with the frames between generated by interpolating from one pinned point to the next.

Reading a geometric value after writing to the DOM in the same frame, forcing the browser to lay out synchronously over and over and stalling the animation that caused it.

An SVG stroke that appears to draw itself by animating its dash offset along its own length, used for signatures, check marks and illustrated line art.

An easing written as a list of sampled stops rather than a curve, which lets CSS express springs and bounces that no cubic bezier can describe.

A JSON format for vector animations exported from design tools and played natively on the web and mobile, so complex motion ships without video.

A control that leans toward the cursor as it approaches, translating a fraction of the distance to its centre so it reads as attracted rather than merely hovered.

The animated dashed outline that circles a selection, moving continuously so the boundary reads as active rather than drawn.

Text or logos that scroll continuously across a strip, either as a decorative ticker or because a label is too long for its box.

The slide-up-over transition that puts a sheet or dialog in front of the current screen while what is behind recedes, the platform motion for entering a modal context.

A transition where a shape or icon is interpolated into a different shape rather than swapped, so the two states read as one object changing.

Blurring an element along its direction of travel so fast movement reads as speed instead of teleporting, borrowed from film and rare but real in interfaces.

The plan for how several animating elements relate in time and space, deciding what leads, what follows, and what stays still.

A defined path an element travels along, with its distance and rotation along that path animated instead of its x and y positions.

A named duration or easing value published by a design system, so timings are chosen from a set rather than typed per component.

One element circling another on a continuous path, used for logo constellations and loading states where the revolving is the ornament.

Scaling or fading a panel out of the control that opened it by putting its transform origin on that anchor, so the panel reads as belonging to its trigger.

The part of a motion that carries past its final value before coming back, the visual signature of an underdamped spring or a back easing curve.

A page turn that lifts and bends the leaf away from the spine as the finger drags it, the most literal transition a reader can be given.

Motion that covers a navigation between two whole pages or routes, replacing the hard cut a document load would otherwise produce.

Moving layers at different rates against the same input, so the slower layers read as farther away and the scene gains depth.

Tying one element's motion to another's so moving or scaling the parent carries the child with it, which is how a group of parts reads as one object instead of several.

An ambient decorative background of many small moving agents: drifting dots, linked constellations, flocks, or starfields animating behind the page content.

How long a spring appears to take, measured to the point the movement stops being visible rather than to its mathematical rest, the figure to quote against a timed animation.

An entrance that scales slightly past full size before settling, so the element arrives with a small snap instead of simply being there.

A back gesture that reveals the destination underneath while the finger is still down, so the swipe can be finished or abandoned once the reader has seen where it goes.

A slow repeating change in scale or opacity that keeps an element alive without moving it, used for waiting states and gentle attention.

A navigation transition where the new view slides in and pushes the old one off, and reversing it pops back, encoding depth in a stack.

Motion that uncovers content already in place, usually by growing a clip or mask outward from a point rather than moving the content itself.

A circular wash that spreads from the point of contact to acknowledge a touch, Material's way of tying feedback to where the finger landed.

Holding a section fixed in place while the page keeps scrolling, spending scroll distance on an animation instead of on movement.

An animation whose progress is bound to scroll position rather than to time, so scrolling back rewinds it exactly.

An animation that scroll position only starts, after which it runs on its own clock and does not rewind when the reader scrolls back up.

A short lateral wobble used to reject an input, borrowed from the head shake and read as no rather than as an error message.

Material's transition where outgoing and incoming views slide and fade along the same x, y, or z axis, so direction encodes the navigational relationship.

The moving highlight that sweeps across placeholder shapes to signal that content is still on its way.

A transition where content translates in or out along one axis, using direction to say whether the user moved forward, back, up, or down.

A single underline or pill that travels between tabs to mark the selection instead of each tab drawing its own, so the move itself says which way the selection went.

Animating a programmatic jump so the page travels to its destination instead of cutting there, which keeps an anchor link or a back-to-top button from losing the reader's place.

A digit or letter changing by flipping through every character between the old value and the new one, imitating the mechanical boards of airports and flip clocks.

A soft radial glow centred on the pointer's position inside a card, lighting its surface and border as the cursor moves and going dark when the cursor leaves.

Motion driven by a simulated spring (mass, stiffness, damping) instead of a fixed duration, so the element settles rather than stopping on a schedule.

Deforming an element along its direction of travel so it reads as having mass and flexibility, usually as a press squash or a launch stretch.

A run of sections that each stick at the top of the viewport as the next one slides over it, so scrolling deals the page like a deck rather than passing it by.

Playing the same animation on a set of elements with a small delay added item by item, so the group arrives as a cascade instead of a block.

Motion that jumps between a fixed number of discrete positions instead of interpolating, the mechanic behind sprite sheets, ticking clock hands and segmented spinners.

A single animation from one value to another over a duration, named for the in-between frames a computer fills in.

Revealing text one character at a time, as if it were being typed, usually with a blinking caret trailing the last letter.

Skewing or stretching content in proportion to how fast the page is scrolling and easing it back to square when the scroll stops, so speed shows up in the shape of the content.

A scroll timeline measured by one element's passage through the scrollport, with named ranges for entering, being contained, covering, and exiting.

An animated change between two states of a page, where the browser photographs before and after and interpolates the elements the two have in common.

A transition where a moving edge or mask travels across the frame, replacing what was there with what comes next.

Washing a just-changed element in colour and letting it fade back out, so a change made without a page reload is still noticed where it happened.

A repeating animation that plays forward then backward instead of jumping back to the start, so a loop has no visible seam.

A presentation that scales a tapped element up into the full view it opens, so the destination appears to come from the thing that was touched.