Asynchronous motion implies elements are independent
Aliases: motion desync · animation asynchrony
What it is
Common fate in reverse: once elements show a noticeable mismatch in the timing, speed, or direction of their movement, they get read as unrelated, independent entities — regardless of how close together or similar-looking they are — rather than as parts of one group. This can be used deliberately (making one element read as separate from everything else) or it can cause unintended damage (elements that should read as one group getting pulled apart by a flaw in how the animation was implemented).
Why it happens
Common fate requires correlation between motion trajectories, and that correlation is quite sensitive to timing and speed deviations — judging whether motion "shares a fate" relies on continuously tracking whether each element's position-over-time curve matches the others, and even a small offset in start or end timing (different animation delays, different easing curves) is enough to produce a mismatch in that tracking, sorting the elements into separate motion streams. This differs from cues like similarity or proximity that are based on a single instantaneous judgment: common fate is judged over a time window, so a mismatch at any point within that window feeds into the judgment.
Where it stops holding
This effect depends on the asynchrony being large enough to be noticeable; if the timing or speed difference is extremely small — well below what the eye can resolve as a phase difference in motion — it won't actually produce a perception of "independence," so minor implementation-level animation timing errors don't need to be obsessed over.
When other strong grouping cues are also present (the elements are already boxed together in a container, say), the sense of "independence" created by asynchronous motion may be partly offset by those other cues; which one wins depends on each cue's own strength, and can't be concluded from the animation mismatch alone.
Applying it
- When an element needs to read as clearly distinct from surrounding content (a tooltip, a transient notification, a floating element not part of the current page), give it a motion rhythm noticeably out of sync with the rest — a different appearance timing, a different easing curve — which communicates "this is separate from the current content" faster than a color change or border alone.
- Conversely, for elements that should read as one group and change together (a batch of selected items, multiple parts of one object), check the animation implementation for timing or speed deviations that shouldn't be there — a common failure mode is components sharing an animation system but configured with inconsistent parameters, which pulls them apart into seemingly unrelated pieces without anyone noticing.
- To verify, record the interface's animation and compare it frame by frame, marking the exact frame each element starts and stops moving, then check whether elements meant to belong to the same group share the same start/end frames or show a visible offset.