The Law of Common Fate

Gestalt Design Principles · Part VI

The five principles we've studied so far, proximity, similarity, continuity, closure, figure/ground, all operate on static images. They work on a frozen frame. Common fate is different. It is the only Gestalt principle that is defined by change. It describes how the visual system interprets motion, and it reveals something fundamental about how perception works: the brain doesn't just see where things are, it tracks where things are going.

The law of common fate states that elements moving in the same direction, at the same speed, are perceived as belonging together, as a single unified group. It was first articulated by Wertheimer alongside the other Gestalt principles, but it has taken on new significance in interface design, where animation has become a primary design material rather than a decorative afterthought.

The evolutionary origin of common fate is easy to understand. In the natural world, objects that move together are almost certainly parts of the same thing, a flock of birds, a school of fish, leaves on a branch in the wind. Objects that move independently are separate things. The visual system learned to use correlated motion as a grouping cue, and it learned it so thoroughly that the inference is now instant and involuntary.

The psychology of correlated motion

Common fate operates through a mechanism called motion correspondence, the visual system's ability to match positions of elements across successive frames and infer velocity vectors. When two elements have matching velocity vectors (same direction, same speed), the brain treats them as a single object even if they look nothing alike. They can be different colours, different shapes, different sizes, if they move together, they belong together.

This is why common fate is the most powerful of the Gestalt grouping cues. It overrides proximity, similarity, and even continuity. Elements on opposite sides of the screen that move together will group more strongly than adjacent elements that move independently. Distance, appearance, and arrangement are all secondary to shared motion.

Correlated motion demo, shared movement creates instant grouping

Notice that in the column and row modes, the spatial arrangement of dots is identical, a perfect grid. Only the motion differs. Yet the groups you perceive are completely different. This is common fate overriding proximity: adjacent dots in different groups are physically closer to each other than to their group-mates, yet the motion makes the grouping unambiguous.

Common fate in interface design

For most of the history of interface design, motion was treated as an enhancement , something added to make an interface feel polished. Common fate reframes this entirely. Motion is not polish. It is semantic content. When elements move together, you are communicating structural relationships that cannot be communicated as efficiently any other way.

This has profound implications for how we think about animation in interfaces. Every time elements move in concert, you are making a claim about their relationship. Every time elements move independently, you are claiming they are unrelated. Animation that is purely decorative, elements moving for visual interest rather than to communicate structure, is not neutral. It is noise that competes with the semantic signal of intentional motion.

Sheets and drawers, the enter/exit contract

Bottom sheets, side drawers, and modal panels are one of the most common applications of common fate in mobile design. When a sheet slides up from the bottom, everything that belongs to it moves together: the handle, the header, the content, the action buttons. The coordinated motion is the signal that these elements form a single panel. If any element moved separately, say, the title appeared before the content, the panel would feel like it was assembling itself, rather than arriving as a coherent object.

Loading states, skeleton screens and common fate

The skeleton screen is a direct application of common fate. When multiple placeholder elements pulse in synchrony, the same animation, the same rhythm, the same phase, the brain reads them as a single loading state. The correlated motion says: these are all waiting for the same thing. This is why a well-designed skeleton screen feels calmer than a spinner: it communicates structure (here is where content will appear) and relationship (it is all coming together) simultaneously.

Accordion, common fate defines what belongs to what

An accordion component relies on common fate to communicate containment. When the panel opens, its content doesn't just appear, it slides out together, all at once, as a single unit. The chevron rotates in the same motion event. The unified motion is the signal that header and content are parts of one thing. If the content appeared with a delay relative to the header, or different sections appeared at different speeds, the relationship between header and panel would become ambiguous.

Common fate and independent motion

The flip side of common fate is just as important: elements that move independently signal that they are separate things. This gives designers a powerful tool for disambiguation. When you want to tell the user "these two things are not related," move them differently. Different timing, different direction, different easing, all of these are ways of saying "separate."

This is the logic of staggered animations. A list where every item enters at exactly the same time reads as one block. A list where items stagger in, each delayed slightly from the one before, reads as a sequence of individual items. The stagger breaks common fate and individuates the elements, which is exactly what you want when the items are distinct and separately actionable.

Stagger vs simultaneous entry

The designer's checklist

1. Motion is meaning. Before adding any animation, ask: what relationship does this motion communicate? Elements moving together say "we are one thing." Elements moving independently say "we are separate things." If an animation doesn't communicate a relationship, it is noise.

2. Synchronise your loading states. All placeholder elements that represent the same loading event should animate at the same rate and phase. This is not a stylistic preference, desynchronised skeletons communicate that different parts of the interface are waiting for different things, which may be false and is always confusing.

3. Use stagger intentionally. Staggered list entry breaks common fate deliberately to individuate items. This is correct for lists of distinct, separately actionable items. It is wrong for content that should feel like a single arriving block, a card's title, body, and footer, for instance, should not stagger unless you specifically want the user to focus on each element sequentially.

4. Enter and exit together. Any group of elements that represents a single conceptual object, a sheet, a modal, a tooltip, a card, should enter and exit as a unit. If sub-elements appear or disappear at different times, you are implying that they are different objects. Reserve independent sub-element animation for moments where you specifically want to draw attention to a change within an already-visible component.