Frame Collapse Reveal
What it does
A rounded frame contracts from the edges of a sticky section down to the size of a centre window; the full-bleed photograph behind it then fades out, and because that window carries the same shot at the same screen coordinates, the picture appears to shrink into the rectangle without a single pixel moving. Only once the fade finishes do six slabs slide out from behind the window, innermost first, and lock in place. Welded to scroll (`scrub: true`), no lag.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
To reproduce this animation in your own project, copy the prompt below into Claude Code, Cursor or any AI coding agent. The prompt is validated — it describes the exact structure, timing and easing, so the agent rebuilds the effect faithfully and you can then adapt colors, copy and layout to your design.
Prompt coming soon.