Wipes & transitions

How it works

A wipe replaces one picture with another behind a moving edge: a slide deck’s next slide pushing in from the left, a game’s loading screen closing in as a circle, a menu panel revealed from the top. Every wipe is the same two parts. A shape gives each pixel a number, its place in the order of reveal. A progress from 0 to 1 sweeps through those numbers, and every pixel whose number is behind the progress is shown.

The shape decides the look

The shape is any function of the pixel’s UV that runs from 0 to 1 across the area. Its distance along a direction gives a straight wipe. Its distance from the center gives an iris that opens like a camera’s aperture, its angle around the center (the polar fundamental) gives a clock wipe, and a signed distance to a star or a diamond gives that shape growing. A noise value gives a dissolve, which is the same idea with a random order. Tiling the UV with fract first and running the shape in every tile gives the blinds and checker sweeps of old video editors.

The edge and the timing

Comparing the shape with the progress through step gives a hard edge, which aliases into stairs on a diagonal. A smoothstep over a small range softens it into a feathered line, and widening that range turns a cut into a cross-fade along the edge. The progress itself should almost never be linear in time. Passing it through an easing curve makes the edge start gently and settle at the end, which is most of what separates a polished transition from a mechanical one.

Where the result goes

The wipe’s result is a mask: 1 where the new picture shows, 0 where the old one still does. On a UI element or a sprite, the mask is the element’s alpha. Between two whole scenes it is the blend factor between two images, which means both scenes must exist as textures at the same time: the old frame saved to a render target, the new one drawn, and a post pass mixing them with the mask. The mask’s math doesn’t change between the two uses; only what it is applied to does.