The Law of Common Fate
Whatever moves together, the eye reads as one — even things that look nothing alike, scattered far apart.
The other five laws work on a still image. This one needs time. When a set of elements moves the same way — same direction, same moment — the eye instantly binds them into a single group and splits them off from everything that stays put or drifts differently. It is the most powerful grouping cue of all: shared motion can overpower colour, shape, even distance. A flock of identical birds is just dots in the sky — until they wheel together and become one thing.
This is the law of motion design. Animate related elements together and they read as one system; let them move independently and they fall apart into unrelated pieces. A menu whose items slide in as one, a card and its shadow moving as a unit, a loading skeleton that pulses in sync — each uses shared motion to say ‘these belong together.’ You’ll feel it in three quick labs — and the loop closes.
- Feel shared motion bind scattered, dissimilar elements into a single group.
- Watch a hidden shape emerge from noise the instant its dots move together.
- Use synchronised motion to make related UI elements read as one system.
- Avoid uncoordinated motion that fractures a design into unrelated pieces.
Identical dots — until some move
Below is a field of dots, every one the same. Nothing groups them — no colour, no spacing, no shape sets any apart. It’s a flat, uniform crowd.
Now set some of them moving, together, in the same direction. Instantly a group appears — you see it as one thing, cleanly separated from the still crowd around it — even though those moving dots are identical to all the rest. Shared motion, and nothing else, made the group. That is common fate, and it’s how a predator hidden in the grass gives itself away the moment it moves.
Hidden in the shimmer
Here every dot is jittering — a field of pure visual noise. Somewhere inside it, a set of dots is arranged into a shape, but you can’t possibly see it: while they all jitter at random, the shape dots are indistinguishable from the rest.
Now make just those dots move coherently — all in the same direction, at the same moment — while the rest keep jittering. An arrow leaps straight out of the noise. Nothing about the dots changed except that some now share a fate; that alone is enough to carve a whole shape out of chaos.
One system, or five loose pieces
Here’s the payoff, and it’s the whole of motion design in one toggle. Five cards. When they rise and fall together — same direction, same timing — you read them as one coordinated system, a single thing with parts.
Now let each one move on its own — different directions, different timing — and the group shatters. The same five cards become five unrelated pieces jostling for attention. Nothing changed but the coordination of their motion, and that alone decided whether they were one thing or five. This is why a good transition moves related elements as a unit — and why careless animation makes an interface feel broken.
What moves together, belongs together
Every lab here is one law wearing different clothes. Name it, and animation stops being decoration and becomes a way to say what is related.
Coordinate the motion of things that belong together.
Common fate is the only Gestalt law that lives in time, and it may be the strongest of them all: shared motion can bind elements that share nothing else — different colours, different shapes, opposite corners of the screen — and it can override every static cue at once. Movement is ancient and urgent to the visual system, so a set of things moving the same way, at the same moment, reads instantly and irresistibly as a single object. It’s how we pick one flock from a sky, one shoal from the sea, one predator from the undergrowth.
On a screen this turns animation into a language of relationship. When you open a menu and its items slide in as one, they announce themselves as a set. When a card lifts and its shadow lifts with it, the two read as one physical object. When a filter changes and the matching results all shift into place together, the user sees which items belong to the new group without a word. Coordinated motion is how a good transition keeps a design feeling like one connected place rather than a series of unrelated jumps — it preserves the story of what came from where.
Which makes the failure mode loud and costly. Motion that isn’t coordinated actively breaks grouping: elements that should be one system, each animating on its own timing and direction, shatter into unrelated pieces and the interface feels janky, chaotic, cheap. The discipline is restraint and synchrony — move related things together and on the same clock, let unrelated things move differently or not at all, and never animate for its own sake. The test is simple: watch your transition and ask what the motion says belongs together. If the answer matches your intent, the motion is doing real work; if not, it’s telling the user a lie.
Which one groups better?
Five face-offs. Same content, two spacings — one makes the relationship obvious, one makes you guess. Pick the clearer, then see why.
Moving as one, everywhere
Once you can see common fate, you notice it wherever things move — on screens and in the sky. Five places shared motion says ‘we belong together.’
Open a menu and every item slides in together, in the same direction, at the same instant. The shared motion tells you at a glance: these belong to one set.
The blocks of a loading card shimmer in perfect unison. That shared pulse binds them into one thing — a single card on its way — rather than three unrelated grey shapes.
Scroll a page and the background drifts one way while the foreground moves another — but each layer moves as a unit, so the eye reads two solid planes at different depths, not a jumble of dots.
Swipe a carousel and every card slides the same distance in the same direction. Because they share one motion, you read the whole row as a single filmstrip being moved, not cards scattering.
A sky full of identical birds is just specks — until they bank and wheel together. The shared motion fuses them into a single, living shape you track as one. The oldest common-fate demo there is.
That’s all six. Proximity groups by nearness, similarity by likeness, closure completes the missing, figure & ground decides what stands out, continuity sets the path the eye travels, and common fate binds whatever moves as one. Together they are the quiet machinery by which your mind turns raw light into objects, groups and meaning — before you ever decide to look. Design doesn’t invent these laws; it works with them, or against them. Now you can see them. The loop returns to where it began: Proximity.
The real references
Common fate is the Gestalt law of motion — and the backbone of modern interface animation. Five worth your time. (Opens in a new tab.)
The Common Fate glossary
Six words that turn “it just feels connected” into a precise, usable idea. Tap a card to flip it.
Questions you actually ask
What people get wrong
Read the grouping
Ten questions in seven formats, tagged by thinking level — each with layered hints: a nudge, the reasoning, then a deeper connection. A wrong answer opens a door, never a dead end. Served from the question bank, never hardcoded.