Browse
Explore the dictionary by design domain and category. Pick a group to list every curated term it holds.
Graphic design
UI / UX
Motion & animation · Graphic design
15 terms
- anticipation
A small opposite or preparatory movement just before the main action, which readies the viewer for what is about to happen. A character crouches before jumping, or a button dips slightly before springing forward.
- ease-in
A timing style where an animation starts slowly and then speeds up, as if the object is gradually accelerating from a standstill.
- ease-out
A timing style where an animation starts quickly and then slows down as it finishes, like a car gently braking to a stop. It is the most common choice for elements arriving on screen because it feels responsive.
- easing
The way an animation speeds up or slows down over its duration instead of moving at one constant rate. Easing makes motion feel natural, the way real objects gather and lose momentum.
- follow-through
The way loose or trailing parts of an object keep moving briefly after the main body has stopped, then settle. It mirrors how hair, cloth, or a ponytail continues after a person halts.
- frame rate
How many still images are shown per second to create the illusion of motion, measured in frames per second (fps). Higher frame rates look smoother; common values are 24, 30, and 60 fps.
- keyframe
A marked point in an animation that defines a specific state, such as a position, size, or colour, at a specific moment. The software fills in the frames between keyframes to create smooth motion.
- loop
An animation that repeats endlessly, jumping back to the start once it reaches the end. A seamless loop is designed so the join is invisible, like a spinning loader or an animated background.
- morph
A smooth transformation of one shape or image into another, where the first gradually reshapes into the second. In interfaces it often means one icon fluidly becoming a different icon, such as a hamburger menu turning into a close cross.
- onion skinning
An animation aid that shows faint ghost images of the frames just before and after the current one, so the animator can see how a drawing relates to its neighbours. The name comes from the translucent layers of an onion.
- overshoot
When an animated element travels slightly past its final position and then springs back to settle, rather than stopping precisely on target. It adds a springy, energetic quality to motion.
- spring animation
Motion driven by a simulated physical spring rather than a fixed duration, so the element wobbles and settles based on properties like stiffness and damping. It produces natural, bouncy movement that adapts to how it is triggered.
- squash and stretch
An animation principle where an object deforms by flattening or elongating as it moves, giving it a sense of weight, flexibility, and life. A bouncing ball flattens on impact and stretches as it speeds through the air.
- stagger
A technique where a group of elements animate one after another with a small delay between each, instead of all at once. It creates a pleasing cascading or ripple effect, common in lists and grids.
- tween
The automatically generated frames that fill the gap between two keyframes, creating smooth in-between motion. The name comes from 'in-betweening', the traditional animation job of drawing those middle frames.