Terms by topic · 12 guides

Motion

Learn how movement can show a change, guide attention, and still keep a screen easy to use.

01 / Atlas

All Motion terms

Open a term for a simple meaning, an example, when to use it, how official it is, and its code name.

01 · Core
Animation

Animation is a planned visual change over time. It can have several steps, states, or repeats.
02 · Core
Drag & Drop

Drag and drop lets people move, reorder, or transfer an item directly. It must show when the item is picked up and where it can land.
03 · Core
Easing

Easing is the timing curve that sets how an animation speeds up and slows down.
04 · More detail
Enter, Exit & Crossfade

Enter, exit, and crossfade add, remove, or replace content. They help the change look smooth and connected.
05 · Core
Keyframes

Keyframes are named points in an animation. Each point sets property values for a chosen moment.
06 · More detail
Marquee

A strip of repeated content that keeps moving. It must offer controls or a still version for people who are sensitive to motion.
07 · More detail
Microinteraction

A microinteraction is a small feedback loop for one action. It has a trigger, a rule, a response, and a state that continues.
08 · More detail
Parallax Scrolling

Parallax scrolling makes layers move at different speeds while a page scrolls. The speed difference creates a sense of depth.
09 · Core
Reduced Motion

Reduced Motion is an accessibility setting and design mode. It removes or simplifies movement that people do not need.
10 · More detail
Spring Animation

Spring animation follows a physics model. Stiffness, damping, mass, and starting speed control how it moves.
11 · More detail
Text Scramble

A decorative text change that shows random symbols for a moment, then settles on the real words.
12 · Core
Transition

A transition moves between two known visual states over a set time.