Catalogue / Plate 72← All plates
A reveal that waits for its picture
A before-and-after wipe that waits for its picture, with the late start measured.
As found
Visualisation of the finished house
Renovation and extension
Kept the footprint. Changed everything else.
A tired brick chalet, re-roofed in slate, rendered, clad in timber and opened up with full-height glass. Drag the line to compare it with where it started.
eager, decode-gated · waiting for the after picture
Remake it
Build one interactive web page: The same before-and-after, wiped across two ways: eagerly, starting only once the picture has decoded, and lazily, the way the exemplar did it, with the arrival measured against the wipe. Chrome shows the fault; Safari hides it. Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: Any wipe, cross-fade, mask or before-and-after that reveals a picture. Do not let it fail the way this kind of piece usually does: A lazy picture inside a keyframe clip-path: Chromium does not fetch it until the animation ends, so the wipe uncovers an empty layer. It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.
Notes: when it suits, when it does not, how it fails
- When it suits
- Any wipe, cross-fade, mask or before-and-after that reveals a picture.
- When it does not
- Nothing: every reveal needs its picture there first.
- How it fails
- A lazy picture inside a keyframe clip-path: Chromium does not fetch it until the animation ends, so the wipe uncovers an empty layer.
Measured on: A construction client's build · F1. Built from scratch for an invented business; nothing here comes from the site studied.