Motion
Four curves and one rule: photos uncover, text fades.
The decision
- The problem
Everything entered the same way, photos and text alike, and a card's gradient could arrive before its photo.
- What I chose
Photos open from the bottom with a mask; text and panels fade in and rise 32px. The mask waits until the photo is ready.
- Ruled out
Scaling images on entry: the growing image left its slot and covered its caption.
- What it cost
Two traps, now handled in one place: a clipped element never counts as visible, and a lazy image under a mask never downloads.
Curves
Four easings cover the whole site. Expo is the default for anything that travels; back adds the small overshoot on buttons and the view pill.
Photos uncover, text fades
A photo opens from the bottom with a mask; text and panels fade in and rise 32px. The case images, the cards on Work and the home, the previous and next cards, the portrait on About, the journal header and every post illustration use the mask. The home plates don't: they already enter from below as each one slides over the last. On a card the photo and its gradient rise together and the title fades in once they have landed, like a caption.
Play with the timing
The four curves of the system, on a photo that enters the way the site's photos do. Change the curve, the duration and the entrance. The dot below the graph runs the same curve: back is the one that passes its mark and settles.
Your system asks for reduced motion, so nothing here travels, as on the rest of the site.
Two traps
- A clipped element never counts as visible. The first version clipped whole cards, and none of them ever appeared: an element clipped to nothing never intersects the screen, so the observer never marks it. The mask goes on the image; the observer watches its container.
- A lazy image under a mask never downloads. The browser decides when to fetch a lazy image by watching the image itself, and a masked one never enters the screen. It only started downloading once the mask had opened, so the gradient arrived first and the photo landed with a jump. Now masked photos load a screen and a half ahead, and the mask opens once the photo is decoded.
Groups
On Work the four big cards open together as soon as the grid appears, and the second row always peeks in from below, so it is clear there is more and which way it goes.
Reduced motion
Under prefers-reduced-motion nothing travels. Photos, text, the timeline and the closing line of a case are simply there, full and lit.