posts

The continuum transition

· 2 min read · motion, design

How a title lifts out of a list and becomes the header of the next page, and why it matters more than it looks.

A name set large in light type above a list of faded names, with an orange rule under it.

In 2009, a studio motion study for Windows Phone showed an email list. A finger taps a name. In about a tenth of a second the rest of the list is gone, the name sinks a little, and then it rises into the header of the open message, larger, settled. Tap back, and the header drops and shrinks into the list again as the list returns around it.

That’s the whole effect. It tells you, without a word, that the page you’re on is the thing you tapped.

The choreography

Continuum does the same thing in four beats:

  1. Lift. The parts of the card that the next page shares (the title, a cover, a tile) are copied into ghosts that float above the page.
  2. Turn away. Everything else swings away on a hinge at the left edge of the screen, top to bottom, while the title sinks a few pixels. This runs while the next page loads, so the motion covers the wait.
  3. Fly. The new page arrives hidden. Each ghost flies to its place in it, taking on the header’s size, weight, and line breaks as it goes.
  4. Turn in. The rest of the page turns in around the landed title, and the ghost hands over to the real header.

Back is the same thing in reverse. The header becomes the ghost, and it lands on the card it came from.

Where the pairing comes from

A card and the page it opens share an id, like posts/the-continuum-transition. The card says data-share-id, the page says data-page-id, and parts on both sides say what they are with data-share="title". That’s all a new layout needs to take part.

Why it’s worth the trouble

Most sites cut. The page you were on disappears and a new one appears, and your eyes have to find their place again. The continuum keeps one thing still in your attention the whole way through. It’s faster to read even though it takes a third of a second, which is the same thing the Windows Phone team found in their own testing: motion that explains itself feels faster than no motion at all.

It never bounces. Metro’s curve is fast out and soft to settle, and nothing overshoots.

When it stays out of the way

If your system asks for reduced motion, there’s no continuum, no turnstile, and no parallax. Pages simply change. Visitors can also turn animations off on the settings page, and the site’s owner can turn them off in src/config.ts.