Motion
The vocabulary of motion design
Animators, editors and motion designers share a small set of words for how things move. Press a term to watch it play and see what it is called.
Pick a term
Nothing playing
Each button plays one term and tells you what it is called. It repeats so you can study it; turn on slow motion to see the detail.
Timing and easing
The same move from left to right, with a different curve each time. The graph plots progress (up) against time (across).
Principles of animation
From Disney's 12 principles of animation, the ones that matter most in product videos and UI.
Entrances and exits
How an element arrives on screen, and how it leaves.
Choreography
Timing several elements against each other.
Transitions
How one scene becomes the next. Film editors and motion designers share these words.
Kinetic type
Text that moves. The motion points at the words; it should never make them hard to read.
Polish and camera
Finishing touches that add depth, weight and life.
All terms
Timing and easing
- Linearalso: No easing
- Constant speed from start to stop. It looks mechanical, so keep it for things that never stop: loops, spinners, tickers.
- Ease outalso: Decelerate, Slow out
- Starts fast and slows into place. The default for anything entering the screen: it arrives with energy and lands softly.
- Ease inalso: Accelerate, Slow in
- Starts slowly and speeds up, leaving at full speed. Right for things leaving the screen; on an entrance it feels sluggish.
- Ease in-outalso: Smooth, S-curve, Slow in and slow out
- Slow, fast, slow. For something moving from one place on screen to another, like a card changing position.
- Overshootalso: Back, Ease out back
- Goes past the target and settles back. A little adds playfulness; too much reads as wobbly.
- Springalso: Physics, Spring ease
- Set by stiffness and damping instead of a fixed curve, so it swings past the target and settles. Feels physical; UI frameworks use springs for drags and gestures.
- Bouncealso: Ease out bounce
- Hits the target and rebounds like a dropped ball, smaller each time. Fun in small doses.
- Holdalso: Pause, Beat
- No motion for a moment. A hold gives the viewer time to read what just arrived; editors ask to “add a beat”.
- Keyframesalso: Keys, Tweening, In-betweens
- You set the ball's position at three keyframes (the dashed rings); the software fills every frame between them. That fill is called tweening, short for in-betweening.
- Steppedalso: Hold keys, Blocking
- Jumps from key to key with no in-betweens. Animators rough out a shot in stepped mode to judge the timing before smoothing it.
Principles of animation
- Squash and stretchalso: Squash & stretch
- The ball squashes flat when it pushes off and lands, and stretches while it moves fast. Its volume stays the same, so it reads as soft and alive.
- Anticipationalso: Wind-up
- A small move the other way before the main action, like crouching before a jump. It tells the viewer something is about to happen.
- Follow-throughalso: Overlapping action, Drag
- The card stops, but its contents keep going a little and settle after it. When parts stop at different times, motion feels loose instead of rigid.
- Arcsalso: Arc motion
- Natural motion follows curves, not straight lines. The ball travels along an arc, so it reads as thrown rather than slid.
- Secondary actionalso: Secondary motion
- A smaller motion that supports the main one. Here the ball hops while its shadow shrinks and fades: subtle, but missed if it's gone.
- Stagingalso: Spotlight, Focus
- Make the one important thing unmistakable: the other items dim and step back while it comes forward.
Entrances and exits
- Fade inalso: Opacity in, Dissolve in
- The card goes from invisible to visible without moving. Quiet and safe, but on its own it can feel flat.
- Slide inalso: Fly in, Move in
- Slides in from the side. Pick the side that matches where it comes from, like the next item in a sequence.
- Risealso: Fade up, Slide up, Rise in
- A short slide up with a fade. The most common entrance in UI and product videos: calm and easy to read.
- Popalso: Scale in, Pop in, Zoom in
- Scales up from small and overshoots a little. Good for icons, badges and anything that should feel like it appeared with a click.
- Drop inalso: Fall in, Bounce in
- Falls in from above and bounces as it lands, like it has weight.
- Wipe inalso: Linear wipe
- A hard edge sweeps across and reveals the card, which itself doesn't move. Borrowed from film transitions.
- Mask revealalso: Reveal, Slide from behind
- The card slides up from behind an invisible edge, as if it was hiding below a line. Crisper than a fade.
- Blur inalso: Focus in
- Comes into focus as it fades in, like a lens finding it. Soft and cinematic.
- Draw onalso: Write-on, Stroke draw, Trim paths
- A line draws itself along its path, like a pen. After Effects calls it Trim Paths; on the web it's an animated stroke.
- Exitalso: Animate out, Build off
- Leaving uses ease in: it starts slowly and is gone at full speed. Exits are usually quicker than entrances.
Choreography
- Staggeralso: Cascade, Offset, Delay
- The same entrance on each item, each starting a little after the last (here about 200 ms). The offset leads the eye down the list.
- All at oncealso: Parallel, Together
- Every item moves at the same time. Clear and quick, but flat: nothing leads the eye.
- Sequencealso: One after another, Chain
- Each item waits for the one before to finish. Very clear, but slow once there are more than a few.
- Ripplealso: Stagger from center
- The stagger starts in the middle and spreads outward, like a stone dropped in water. It draws the eye to the centre first.
- Ping-pongalso: Yo-yo, Boomerang, Alternate
- Plays forward, then the same motion in reverse, and repeats. An easy way to loop something that doesn't end where it began.
- Seamless loopalso: Cycle, Loop
- Ends exactly where it began, so it repeats forever without a visible jump. Backgrounds, loaders and GIFs live on loops. Runs until you pick another term.
Transitions
- Cutalso: Hard cut, Straight cut
- Scene A becomes scene B from one frame to the next. Most edits are cuts; the other transitions are for when the change itself should be noticed.
- Crossfadealso: Dissolve, Cross-dissolve, Mix
- Scene A fades out while B fades in, so for a moment you see both. Softer than a cut; suggests a link between the two.
- Dip to blackalso: Fade through black, Dip to white
- Fades down to black, then up into the next scene. Signals a bigger break: time passing, a new chapter.
- Wipealso: Linear wipe
- A hard edge sweeps across the frame, replacing A with B as it goes. Neither scene moves.
- Pushalso: Slide, Push slide
- Scene B pushes scene A out of the frame; both move together, like a carousel.
- Slide overalso: Cover, Slide on
- Scene B slides in on top while A stays put and steps back. Feels like a new layer arriving, such as a detail view.
- Zoom throughalso: Zoom transition, Push through
- The camera seems to fly through scene A into scene B: A grows and fades while B grows into place.
- Whip panalso: Swish pan, Whip
- A very fast pan that blurs into the next scene. Energetic; usually paired with a whoosh sound.
- Match cutalso: Graphic match
- A cut where a shape or movement lines up across both scenes, so the eye carries straight through. The dot keeps moving across the cut.
- Morphalso: Shared element, Magic Move, Smart Animate
- One element changes into its counterpart in the next scene, moving and resizing while the rest crossfades. Keynote calls it Magic Move; Figma, Smart Animate.
Kinetic type
- Word by wordalso: Word reveal, Per-word
- Each word arrives on its own, in reading order. Sets the pace of reading; good for short, punchy lines.
- Typewriteralso: Type on, Typing
- Letters appear one at a time behind a cursor, as if typed. Reads as live and personal; slow for long text.
- Letter by letteralso: Per-character, Character stagger
- A stagger on every character, each rising and turning upright. Lively, but keep it for a few words.
- Line revealalso: Mask reveal, Rise from a line
- Words rise from behind an invisible line, as if the line was their floor. Crisp and editorial.
- Tracking inalso: Letter-spacing in, Tracking
- The letters start spread out and draw together as they fade in. Feels premium; film titles use it a lot.
- Scramblealso: Decode, Glitch text
- Random characters flicker and lock into the real text from left to right. Reads as techy or secret.
- Counteralso: Count-up, Rolling number, Ticker
- A number counts up to its value, slowing as it lands. Makes a stat feel earned.
- Highlightalso: Marker swipe, Underline swipe
- A marker swipes behind the keyword, like a highlighter pen. Points at one word without moving the text.
- Emphasisalso: Keyword pop, Hit
- The keyword pops: it scales up, tilts and changes colour on the beat. Often timed to the voice-over or a sound.
Polish and camera
- Parallaxalso: Multiplane, 2.5D
- Near layers move faster than far ones, so a flat picture gains depth. The camera seems to slide past.
- Motion bluralso: Shutter blur, Smear
- Fast motion smears, the way a camera shutter would catch it. Without it, quick moves look choppy.
- Speed rampalso: Time remap, Slow-mo ramp
- Fast, then slow motion, then fast again, within one shot. Lets a key moment linger without stopping.
- Camera shakealso: Screen shake, Impact
- The whole frame jolts and settles, as if something heavy landed. Sells weight and impact; use sparingly.
- Rack focusalso: Pull focus, Focus pull
- The focus shifts from one depth to another: the background sharpens while the card blurs, then back. Directs the eye without a cut.
- Floatalso: Idle, Hover, Breathing
- A slow, endless bob and sway, so a still frame never looks frozen. Runs until you pick another term.
- Pulsealso: Attention, Heartbeat, Glow
- A gentle beat and a ring that spreads out, repeating. Asks for attention, like a button that wants a click.