unvibed.
Menu
Free UI audit
All motion techniques

Proof crossfade.

Choose an ink revision for the same plate. The paper and crop stay fixed while the newly selected proof fades in.

Oxide proof

Resting states
Oxide proof → Cobalt proof
Reduced motion
The selected ink revision appears immediately with the same crop.

Implementation excerpt

.revision { opacity: 0; transition: opacity 160ms ease-out; }
[data-on="true"] .revision { opacity: 1; }

Where Unvibed uses it

Selecting a direction crossfades between two treatments of the same Tallybook records. The live direction specimen

Related design directions