Throughline Motion
Every transition is a moment on the emotional throughline. Animation is not decoration, it is experience.
What is it?
Throughline Motion treats every transition as an emotional crossing. The body perceives motion before cognition processes it. A sudden cut triggers alertness. A slow dissolve signals continuity. Research on embodied cognition (Lakoff and Johnson, 1999) established that abstract concepts are grounded in physical experience: we understand 'progress' as forward movement, 'completion' as arrival, 'dismissal' as departure. A designer who ignores this is accidentally communicating emotional content, usually the wrong kind.
When to use it
After creating your spatial map (Recipe 02). When defining transitions between screens or states. During motion specification and animation handoff.
How to do it
For each transition, name the two emotional states: what state does the user leave, what state do they enter.
Choose an easing that matches the emotional crossing: ease-out for arriving/relief, ease-in for leaving/tension, spring for surprise/delight, linear for mechanical/procedural flows.
Define duration by cognitive load: high-load transitions are slower (200-400ms) to give the user time to reorient. Low-load confirmations are fast (80-150ms).
Pick a direction: expanding for opening/discovery, contracting for closing/confirming, horizontal for navigation, vertical for hierarchy.
Pro tips
Most motion specs say 'fade 200ms'. That is a description. This is an intention: 'the user crosses from doubt into clarity, the interface opens, it does not flip.'
Duration is inversely proportional to user familiarity and directly proportional to state significance. First time seeing a screen: slow down. Tenth time: get out of their way.
Wrong easing in a medical interface can feel flippant. Wrong easing in a consumer app can feel bureaucratic. The grammar matters.