How do you animate a state change so it reads as cause and effect?

You make a state change read as cause and effect by connecting the trigger to the result through continuity, of position, of shape, or of motion, so the user watches the new state grow out of the action rather than simply appearing in its place. The method is to trace the relationship between what the user did and what happened, showing the change as it occurs instead of swapping one state for another. When the eye can follow an unbroken line from the action to its outcome, the brain reads the action as the cause. When the line is broken, the outcome reads as unrelated, no matter how smooth the effect.

The mechanism rests on how people infer causation: we believe one thing caused another when we can see the second emerge continuously from the first. A result that appears abruptly, with no visible path from the trigger, forces the user to assume a connection rather than perceive one, and that assumption is exactly the gap that makes an interface feel disconnected. Continuity closes the gap. If the element that was tapped is the same element that grows, moves, or reshapes into the result, the user does not have to reason about the link; they witness it, and the interface feels responsive to them specifically.

The clearest example is a card that expands into a detail view. Done as a swap, the card vanishes and a full screen panel cross fades in, and although the panel is the consequence of the tap, nothing visibly ties them together, so the user lands on a new screen with a faint sense of teleportation. Done with continuity, the tapped card itself stretches and grows, its image and title carrying into the expanded view as the surrounding content slides out of the way, and the detail view is unmistakably the card the user touched, now opened. Same start, same end, but only the second traces the relationship, so only the second reads as cause and effect. Collapsing it back into the same card closes the loop and keeps the user’s spatial map intact.

The same principle applies to smaller changes. A menu that grows out of the button that summoned it, anchored to that button’s position, reads as that button opening; a menu that fades in detached in the middle of the screen reads as something that merely appeared. A deleted item that shrinks and slides away while its neighbors close the gap shows the user what their action did; an item that just blinks out leaves them checking whether the right thing was removed. In each case the fix is the same: keep a thread of position, shape, or motion running from the trigger to the result.

One case sits outside this: continuity is the goal, not motion for its own sake, and some state changes have no spatial relationship to trace. A simple status update, a label going from saved to saving, may not have a position or shape that carries from cause to effect, and forcing an elaborate transition onto it adds spectacle without adding clarity. There the honest acknowledgment is a quick, legible change in place, not a choreographed move. Continuity matters most when there genuinely is a relationship between the trigger and the result; where there is not, do not manufacture one.

So when you animate a state change, start by asking what visibly connects the action to its outcome, the same element, the same position, a shared shape, and build the transition to carry that thread unbroken from one to the other. Resist the fade between states default, which is simple precisely because it hides the relationship rather than showing it. Animate so the new state visibly grows out of the action that caused it, and the interface will read as responsive instead of merely changing.