Synchronized movement in a transition expresses belonging
Aliases: shared element transition · motion-based identity continuity
What it is
When an interface state changes — a card expands into a full page, a list item turns into a detail view — if the elements belonging to that same object move together in the same direction and rhythm during the transition, users identify the content before and after as "the same thing changing shape," rather than "the old content vanished and new content appeared out of nowhere." This applies common fate along the time axis to weld the identity across a change together.
Why it happens
Common fate is judged by whether motion trajectories correlate, and that judgment doesn't require the user to first understand what's on screen — as long as the elements in a transition keep moving in the same direction and speed, the visual system automatically identifies them as one moving whole, welding the before and after states into a continuous perceived identity. That's much faster than having users compare text content and reason "this is probably the same thing," and it needs no active attention. Conversely, if elements in a transition each move on their own timing or direction, that automatic weld doesn't happen, and users get no free signal that "this is the same object" — they're left to reconstruct identity some other way, like remembering what they clicked.
Where it stops holding
This mechanism solves the problem of identity continuity (is this the same thing) — it does not address whether the transition's speed is appropriate or whether the animation's duration slows the interaction down; those are a separate set of considerations and shouldn't be evaluated together with this one.
When a transition involves many elements that each need a different path to reach their destination (a grid reflow, say), perfectly synchronized motion may not be physically achievable. Whether belonging still gets communicated in that case depends on whether the motion pattern shares some overall consistent rule (all following an arc, all preserving relative position), not on requiring pixel-exact synchrony.
Applying it
- When a state change represents "this is the same object expanding or collapsing," keep the key elements that represent that object (title, thumbnail, dominant color block) moving continuously through the transition into their corresponding position in the new state, rather than having the old state vanish abruptly and the new one appear abruptly.
- When a transition involves multiple elements, give their start/end timing and direction a consistent overall logic, even if their individual paths differ — the goal is for it to read as one unified motion, not a set of independent actions.
- To verify, strip a transition of any sound or text cues, keeping only the visual motion, and ask someone unfamiliar with the interface to watch it and say which element before the change became which element after — check whether their answer matches the intended identity relationship.