Eight hover effects for a lookbook grid of photographs: a card takes over each one, never with a plain straight wipe: along a jagged, curved or folded edge, melting through, seen through glass or flickering in like a changing channel. Driven by GSAP, and drawn in WebGL in every variation but 03, which cuts the card with a CSS clip-path.
Inspired by the jagged-edge wipe of the menu on Monument. 03 is based on it; the other seven are our own takes on the same idea, a card taking over a photograph some other way than a plain wipe.
Run this demo on a local server. There's no build step and nothing to install, but the scripts are ES modules, which don't load from file://:
npx serve .
# or
python3 -m http.serverThen open index.html (or index2.html … index8.html for the other variations) and move the pointer over the photographs. On a touch screen, tap one to bring its card in and tap again to send it off.
- Inspired by the menu transition on Monument; 03 is based on it.
- Photographs: generated for this demo with Nano Banana in Paper, a series of six for each variation.
- Nyght Serif by Maksym Kobuzan (SIL Open Font License,
fonts/OFL.txt), and Inter Tight from Google Fonts. - GSAP 3.15.
Follow Codrops: Bluesky, Facebook, GitHub, Instagram, X
The code is MIT. Nyght Serif in fonts/ is under the SIL Open Font License (fonts/OFL.txt), and GSAP in js/gsap.min.js under its own standard license.