Transition

When a screen swaps instantly, nothing survives of its relationship to the previous one. There is nothing between the press and the new screen appearing, so the user never reads the two as connected.

Pagedeck's document list had that problem. Press a card and the document screen appeared in an instant. The trouble came on the way back. Pressing back brought the list up again, but the card just pressed had to be found all over. With twenty rows that scan cost time every single time.

Bridging the two screens with movement keeps the relationship. Watching a card grow into the document screen carries both facts at once: that what you are looking at came out of that card, and that going back returns you to it.

The before and after get joined by movement. Four things are decided.

1. What changes. Position, size, and opacity cover most of it — a card growing in place to fill the screen, or something sliding in from the right.
2. How long. Duration, the length of the movement, usually runs 0.2 to 0.3 seconds, a little longer when a larger area moves. Past 0.5 seconds what was meant as information becomes waiting.
3. The speed along the way. The curve describing how speed changes is easing. Things entering the screen get a curve that starts fast and settles slowly; things leaving get one that starts slowly and disappears fast.
4. The way back. Moving in reverse on the back journey is what makes the relationship work in both directions. Leave the exit as an instant swap and the user has to find their place again.

A spec should not carry only a time. Write what moves and how far along with it. Give a full-screen rise and a card growing slightly in place the same 0.25 seconds and the first feels rushed while the second drags.

If the operating system's reduced motion setting is on, drop the large moves and scaling and keep only the fade. Remove everything and you lose the part that tells the user what changed.

"Let's add a transition from card to document. People lose their place coming back."

Keep the relationship between two screens as movement.

"0.6 seconds is too long. Let's take it to 0.25."

Time meant to inform has turned into time spent waiting.

"We have the way in but not the way out."

The return movement is missing.

At Pagedeck, Noa fixes the values once rather than choosing per screen: 0.25 seconds where a whole screen changes and 0.15 where a small element moves position. Theo keeps those values in one place, because it lets the reduced-motion setting drop only the large-movement values close to zero in a single step.