vocab.design

motion

Fade through

also called sequential fade (community), fade out then in (community)

Material's transition for unrelated views: the outgoing view fades out completely before the incoming one fades in while scaling up slightly.

A fade through is two fades that refuse to overlap. The outgoing view drops to nothing over roughly the first third of the transition, and only once it is gone does the incoming one come up, scaling from about 92 percent to full size as it arrives. Nothing is ever half of one view and half of another, so the moment reads as a clean handover: that has ended, this has begun. The small scale-up is the whole reason it does not read as a stall. It gives the arriving view a direction of travel without giving it a place it travelled from.

Material publishes it as the transition for destinations that have no relationship. Tabs in a bottom bar, top-level sections behind a navigation rail, a card whose contents are being replaced with something of a different shape: these are the cases where any spatial story would be a lie, since the views are not beside each other and one is not inside the other. The absence of geometry is the argument, and it is what makes fade through the safe default when a view swap has nothing true to say about direction.

Three neighbours are easy to confuse with it. A crossfade overlaps its two halves on purpose, so both are partly visible at the midpoint and the change reads as one thing becoming another rather than as one thing replacing another. Shared axis keeps the paired fade but adds travel along a single x, y, or z axis, which turns the swap into a claim about where the views sit relative to each other. A dissolve is the same overlap seen from film, usually across a whole frame of imagery rather than between two interface views.

The craft is mostly in the container. Both views have to be out of the flow for the duration, stacked in one slot that holds its own size, or the moment when neither is present will collapse the layout and everything below will jump. Keep the whole move short, near 300 milliseconds, since a handover with a gap in the middle feels twice as long as it is. Keep the scale change small enough that it reads as arrival rather than as zoom. And under a stated prefers-reduced-motion let it flatten to a plain swap: with no overlap to protect, there is nothing left to lose.

Which word?

If you wantsay
two views have no spatial or hierarchical relationshipfade through
swapping content of the same shape in placecrossfade
the change should register without implying directiondissolve
two views sit next to each other in a sequence or hierarchyshared axis

Implementations

Specimens illustrate the concept; for production use, start here.

materialFade through

Sources