Motion Design Glossary

Every term a motion designer runs into, defined in one self-contained paragraph. Written for people learning animation, and for anyone who needs a precise definition to quote.

58 terms

Alpha channel

The alpha channel is the extra per-pixel value that stores transparency alongside red, green and blue. An alpha of zero is fully transparent and full alpha is fully opaque. Video codecs handle it differently: VP9 in WebM can in principle carry alpha, while H.264 inside MP4 cannot. In KinoViz, transparent output is currently a PNG frame; video exports, MP4 and WebM alike, bake the canvas background into every frame.

Anchor point

An anchor point is the reference position that an element rotates and scales around, and the point whose coordinates its position keyframes actually describe. Moving the anchor without moving the element changes nothing visually, but every later rotation or scale behaves differently. Putting the anchor at the base of a bouncing shape, for example, makes it squash downward instead of shrinking toward its own centre.

Anticipation

Anticipation is a small preparatory movement in the opposite direction of the main action, used to tell the viewer what is about to happen. A character crouches before jumping; a button pulls back slightly before flying off screen. In motion graphics a few frames of anticipation make an otherwise mechanical move read as intentional and physically plausible.

Aspect ratio

Aspect ratio is the proportion between the width and the height of a canvas or a video frame, written as two numbers such as 16:9, 1:1 or 9:16. Each distribution surface expects a different one: 16:9 for landscape video, 1:1 for feed posts and 9:16 for vertical stories and short-form video. Choosing it before you animate avoids reframing every layer later.

Bloom

Bloom is a post-processing effect that lets bright areas of an image bleed light into their surroundings, imitating the way a real lens scatters intense highlights. It is what makes neon signs, screens and specular highlights feel genuinely luminous rather than merely light-coloured. Applied too strongly it washes out detail, so bloom is usually kept subtle and driven by the brightest pixels only.

Boolean operations

Boolean operations combine two or more vector shapes into a new one using set logic: union merges them, subtract removes one from another, intersect keeps only the overlap and exclude keeps everything except the overlap. They are how most icons and logo marks are actually constructed, because a complex silhouette is easier to build from simple primitives than to draw by hand.

Camera orbit

A camera orbit rotates the viewpoint around a fixed target while keeping it framed, as if the camera were mounted on a circular track. It is the standard way to show a three-dimensional object from every side without moving the object itself. Because the subject stays still, an orbit reads as the viewer walking around it rather than as the product spinning.

Related:Dolly,GLB,HDRI Read the guide →

Clipping

Clipping restricts where an element is allowed to draw, hiding everything that falls outside a defined region. It is the mechanism behind reveal animations: instead of moving the artwork, you animate the clipping region so content appears to be wiped, sliced or unrolled into view. Unlike deleting geometry, clipping is non-destructive and can be animated in both directions.

Component

A component is a reusable group saved as a master definition, from which instances are placed on the canvas. Editing the master updates every instance at once, which keeps a repeated element such as a logo lockup or a card consistent across a whole project. Instances can still carry their own position, timing and transform without breaking the link to the master.

Cubic Bézier curve

A cubic Bézier curve is defined by a start point, an end point and two control handles that bend the path between them. In animation it describes an easing curve: the horizontal axis is time, the vertical axis is progress, and dragging the handles changes how acceleration is distributed. The same maths draws vector paths, which is why one curve model covers both shape and timing.

Dolly

A dolly moves the camera physically closer to or further from the subject, changing both its size in frame and the sense of depth around it. It differs from a zoom, which only changes focal length and flattens perspective. Because a dolly shifts parallax between foreground and background, it reads as real spatial movement and is the more cinematic of the two.

Draco compression

Draco is a mesh compression format from Google that shrinks the geometry inside a glTF or GLB file, often to a fraction of its original size, at the cost of a short decode step when the model loads. It is the usual reason a browser-based 3D scene stays under a few megabytes, and it is widely supported by web viewers and engines.

Ease-in / ease-out

Ease-in means an animation starts slowly and accelerates; ease-out means it decelerates before it stops; ease-in-out does both. Real objects have mass and never change speed instantly, so linear motion looks mechanical by comparison. As a rule of thumb, elements entering the frame ease out so they settle gently, while elements leaving ease in so they accelerate away.

Easing

Easing is the rule that decides how a property distributes its change over the time between two keyframes. Without it, motion is linear and feels mechanical; with it, a move can start slowly, accelerate, overshoot or settle. Easing is the single largest contributor to whether an animation reads as polished, and it is applied per property rather than per layer.

Effector

An effector applies a transformation across many elements at once and varies its strength per element, usually by index, distance or a random seed. Instead of keyframing fifty items individually, you animate one effector and let it distribute rotation, offset, scale or colour through the whole set. It is the standard tool for building array-based motion such as grids and title sequences.

Extrude

Extruding takes a flat two-dimensional outline and pushes it along a third axis to create solid depth, turning a logo or letterform into a three-dimensional object with real side walls. Because the result is genuine geometry, it can be lit, given materials and rotated in space, which a faked drop shadow or offset copy can never convincingly do.

Follow-through

Follow-through is the continued movement of loose or trailing parts after the main body of an object has stopped: hair, cloth, a cape or a soft appendage keeps travelling and settles a few frames later. Combined with overlapping action, it prevents everything from arriving on the same frame, which is the main reason cheap animation looks stiff.

Frame rate (fps)

Frame rate is how many still images a video shows per second, written as fps. Higher rates give smoother motion and larger files: 24 fps carries a filmic look, 30 fps is the common web default and 60 fps is used where fast movement or interface motion must stay crisp. Frame rate is fixed at export and cannot be recovered afterwards.

GIF

GIF is a very old image format that can hold a short looping animation, limited to a 256-colour palette and one-bit transparency. Those limits make gradients band badly and file sizes balloon compared with modern video. KinoViz does not export GIF; for short loops it exports MP4 or WebM, which are smaller, smoother and supported everywhere GIF is.

GLB

GLB is the binary, single-file form of glTF: geometry, materials, textures and animation are packed into one file instead of a JSON document plus loose assets. That makes it the practical choice for the web, because a scene loads in one request and nothing can go missing. KinoViz imports GLB and glTF models, with Draco compression supported.

Glow

A glow spreads soft light outward from the edges or body of an element, usually tinted by the element itself. Unlike bloom, which reacts to the brightness of a whole rendered frame, a glow is attached to one object and can be dialled in per layer. It is the quickest way to make text, icons or strokes look emissive on a dark background.

GLSL shader

A shader is a small program that runs on the GPU once per pixel or per vertex, and GLSL is the language used to write them for WebGL. Because the colour of every pixel is computed from a formula rather than read from an image, shader-based backgrounds and materials stay perfectly sharp at any resolution and cost almost nothing to store.

glTF

glTF is an open standard for transmitting three-dimensional scenes, often called the JPEG of 3D because it is designed for delivery rather than for authoring. It stores meshes, physically based materials, textures, skins and animation in a form engines can upload to the GPU with almost no conversion, which is why nearly every web 3D viewer accepts it.

Gradient mesh

A gradient mesh blends several colour points spread across a surface, so hues bleed into one another in soft irregular fields instead of along a single straight or radial axis. It produces the organic, atmospheric backgrounds common in modern product design, and when it is generated procedurally the colour points can be animated to drift slowly over time.

Group

A group binds several elements into one object with a shared transform, so moving, rotating or scaling the group applies to every child while each child keeps its own coordinates relative to the group. Groups can be nested, and animating a parent group while its children also animate is how compound motion such as a rotating wheel on a moving cart is built.

H.264

H.264, also called AVC, is the most widely supported video codec in existence: every browser, phone, editor and social platform can decode it, usually with hardware acceleration. It is the safe default for delivery. Its one significant limitation for motion design is that it carries no alpha channel, so a transparent asset has to come from somewhere else — in KinoViz, from a PNG frame.

Halftone

Halftone reproduces continuous tone using a grid of dots whose size or spacing varies with brightness, the technique that made newspaper and comic printing possible. Used deliberately as an effect it gives artwork a printed, screen-printed or retro editorial character, and animating the dot grid produces the shimmering texture associated with risograph and comic styling.

HDRI

An HDRI is a high dynamic range panoramic image used as the lighting environment for a three-dimensional scene. Instead of placing individual lamps, the whole surrounding image lights the model and is reflected in its surfaces, which is why a metallic or glass object suddenly looks believable. Swapping the HDRI changes the entire mood of a render in one step.

Interpolation

Interpolation is the calculation that fills in property values between two keyframes. Numeric properties such as position or opacity blend smoothly, colours blend through a colour space, and some properties are discrete and simply switch at the second keyframe with nothing in between. Knowing which properties interpolate and which jump explains most surprises in a timeline.

Keyframe

A keyframe records the value of one property at one point in time. Set two of them and the software calculates every frame in between, so animating means describing states rather than drawing motion. Keyframes belong to individual properties, not to whole layers, which is why position, scale and opacity can each run on their own independent rhythm.

Liquid glass

Liquid glass is a material style that combines refraction, blur and a soft specular edge so an element appears to be a thick, slightly molten pane sitting above the content behind it. It reads very differently from flat translucency because the background is distorted rather than merely dimmed, which is what gives the surface an apparent thickness.

Loop

A looping animation is built so its last frame flows seamlessly into its first, letting it repeat forever without a visible seam. Achieving that usually means matching the start and end values of every animated property and avoiding easing that stops dead at the end. Seamless loops are the standard format for banners, backgrounds and social posts.

Lottie

Lottie is a JSON format that describes vector animation and is played back by a runtime library inside an app or web page, so the animation stays resolution independent and can be controlled by code. It is a delivery format for product interfaces rather than a video. KinoViz does not export Lottie; it exports MP4, WebM and PNG plus its own project file.

Mask

A mask uses one shape to control the visibility of another element: where the mask is opaque the content shows, where it is transparent the content is hidden. Because the mask itself can be animated, moved or feathered, masks are the basis of wipes, text reveals and shaped photo crops, all without altering the underlying artwork.

Morphing

Morphing animates one shape smoothly into another by interpolating the positions of their anchor points rather than cross-fading two images. It works cleanly when both paths have a comparable number of points arranged in the same order, which is why icon transitions are often drawn from a shared point structure from the start.

Motion blur

Motion blur smears a fast-moving element along its direction of travel, reproducing what a camera shutter records when a subject moves during an exposure. Without it, quick moves can strobe or appear to jump between positions. Applied to graphics it also softens the harshness of very fast transitions and makes them feel physically continuous.

Motion trail

A motion trail draws several delayed copies of an element behind it, each sampled from an earlier moment on the timeline and usually fading or shrinking with age. Unlike motion blur, which is a camera artefact, a trail is a stylistic device: it exaggerates speed, traces a path through space and is a staple of kinetic typography and sports graphics.

MP4

MP4 is a container format, not a codec: it wraps video, audio and metadata into a single file, most often with H.264 video inside. Because that combination plays everywhere, MP4 is the default choice for uploading to social platforms, embedding in presentations and sending to clients. It cannot carry an alpha channel with H.264 video.

Onion skin

Onion skinning shows faint copies of neighbouring frames underneath the current one, so you can see where an element came from and where it is heading while editing a single moment. Borrowed from hand-drawn animation, where physical drawings were traced through translucent paper, it is the fastest way to judge spacing and keep an arc consistent.

Path animation

Path animation moves an element along a drawn vector path instead of between straight-line keyframes, so it can follow an arc, a spiral or a hand-drawn curve exactly. The element can also be told to rotate so it always faces along the path, which is how planes, cursors and rockets stay correctly oriented as they travel.

PBR material

Physically based rendering describes a surface with parameters that mirror how real materials behave, chiefly base colour, metalness and roughness, plus normal and ambient occlusion maps. Because the model is grounded in physics, the same material looks correct under any lighting environment, which is what makes assets portable between engines and viewers.

Ping-pong

Ping-pong playback runs an animation forward to the end and then backward to the start, repeating in alternating directions. It guarantees a seamless join without matching first and last values, which makes it a quick fix for loops. The trade-off is that the reversed pass inverts your easing, so accelerations read backwards on every second cycle.

Pivot

The pivot is the point a transform rotates or scales around. For a single element it usually coincides with its anchor point, but for a group it is derived from the children, so regrouping can move it. Since every rotation keyframe is measured against the pivot, an unnoticed pivot shift is a common cause of elements swinging from the wrong place.

Raster graphics

A raster image stores a fixed grid of pixels, so its detail is decided the moment it is created. Photographs and exported frames are raster. Scaling one up past its native size cannot invent detail and produces softness or visible pixels, which is why raster assets should be imported at or above the size they will finally occupy.

Resolution

Resolution is the pixel dimensions of an exported frame, usually named by its height: 1080p means 1920 by 1080 for landscape video, and 1080 wide by 1920 tall for vertical. Higher resolution preserves fine detail such as thin strokes and small type, and costs proportionally more render time and file size.

Rigid body

A rigid body is an object in a physics simulation that has mass and collides with others but never deforms. Giving elements rigid bodies lets gravity, bounce and friction generate motion that would be tedious to keyframe by hand, such as objects tumbling into a pile. The result is computed rather than authored, so you steer it by tuning parameters.

Safe zone

The safe zone is the central portion of a frame that stays visible after platform interface elements, captions and crops are applied. On vertical social video the top and bottom strips are routinely covered by usernames, buttons and captions, so titles and logos placed there disappear. Keeping essential content inside the safe zone is a delivery requirement, not a style choice.

Spring animation

A spring drives a property with a simulated physical spring described by stiffness, damping and mass, rather than by a fixed-duration curve. The value overshoots its target and settles, and the duration falls out of the physics instead of being set by hand. Springs are the standard for interface motion because interruptions resolve naturally from the current velocity.

Squash and stretch

Squash and stretch deforms an object along its axis of motion, stretching it as it accelerates and flattening it on impact, while keeping its apparent volume roughly constant. It is the oldest trick in character animation and it works just as well on logos and interface elements, where a few frames of it turn a rigid slide into something that feels alive.

Stagger

Staggering offsets the start time of the same animation across a set of elements, so a list, grid or line of letters arrives in a cascade instead of all at once. The offset is usually a fixed small delay multiplied by each element index. It is the single most effective way to make a group entrance feel designed rather than dumped on screen.

Staging

Staging is presenting an idea so it reads unmistakably: one clear focus per moment, supporting elements arranged so they do not compete, and movement timed so the eye is led where it needs to go. In short-form motion, where a viewer may give a clip two seconds, staging decides whether the message lands at all.

SVG

SVG is an XML-based format that describes an image as shapes, paths and text rather than pixels, so it stays sharp at any size and stays small. It is the usual export format for icons and logos from design tools, and because its geometry is editable, an imported SVG can be recoloured, split apart and animated path by path.

Timeline

The timeline is the horizontal view of a project against time, where each layer occupies a row and its keyframes appear as markers along it. Dragging keyframes changes when things happen, dragging the ends of a layer bar changes how long it exists, and the playhead marks the frame currently drawn on the canvas.

Trim path

Trim path animates how much of a stroke is drawn, using a start and an end position along the path expressed as percentages. Animating the end from zero to one hundred produces the classic self-drawing line used for signatures, maps, underlines and diagram build-ups, and animating both together sends a dash travelling along the path.

Tween

A tween is the span of generated frames between two keyframes, and by extension the word for letting software fill that gap. The term comes from hand-drawn production, where a senior animator drew the extremes and an assistant drew the in-betweens. Today the computer does the in-betweening, and easing controls how it distributes those frames.

Vector graphics

Vector graphics describe an image as mathematical shapes and curves rather than a pixel grid, so it can be scaled to any size without losing sharpness and stays editable point by point. That editability is what makes vector artwork the natural basis for motion design, because individual anchor points and strokes can be animated independently.

VP9

VP9 is an open, royalty-free video codec developed by Google, normally carried inside a WebM container. It compresses more efficiently than H.264 at the same quality and, crucially for motion design, the codec can encode an alpha channel — though whether a given tool actually writes one is a separate question. the KinoViz WebM export does not, so its transparent output is a PNG frame.

WebM

WebM is an open container format designed for the web, usually holding VP9 or VP8 video. Every modern desktop browser plays it, and unlike MP4 with H.264 the container can carry transparency, though each tool decides whether to write it — the KinoViz WebM export does not, and its transparent output is a PNG frame. Support outside browsers, in editing suites and on social platforms, is patchier.

Try the concepts in a real editor

KinoViz runs in the browser — keyframes, easing curves, 3D models and video export, with nothing to install.

Open KinoViz