Skip to content
motionprompts motionprompts

Zoomable Image Wall

GSAP animation component · Published 2026-07-27 · by vanguardia.dev

Open live demo ↗ Download source

What it does

A full-viewport mosaic wall of 1200 image tiles that reveals on load with a random GSAP grid stagger (scale + opacity, power1.out). Zoom-in/out buttons run a 2.5s power4.inOut GSAP tween that explodes each tile outward and scales it up, and a drag layer lets you pan the zoomed wall with a lerp-smoothed translate3d.

How it's built

Categorygallery
Techgsap
Complexitypage
Performance costmedium
Mobile-safeyes

gallery mosaic image-wall drag zoom stagger gsap editorial interactive

Rebuild it with AI

This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.

# Zoomable Image Wall — random-stagger mosaic reveal + click-zoom explosion + drag-to-pan
## Goal
Build a full-viewport, pitch-black **mosaic wall of 1200 tiny image tiles** that fills a canvas larger than the screen. On load, every tile **pops in from `scale:0` to `scale:1` with a random grid stagger** (the mosaic materialises tile-by-tile in no particular order). A floating pill of two buttons (zoom-out / zoom-in) toggles a **2.5s zoom**: clicking zoom-in makes every tile **explode radially outward from the viewport centre and blow up to 5×** (you dive into the wall); clicking zoom-out reverses it. While zoomed, a transparent drag layer lets you **click-drag to pan** the enlarged wall, smoothed by a manual `requestAnimationFrame` lerp loop writing `translate3d`. No scroll, no ScrollTrigger, no GSAP plugins — just core `gsap`, a click state machine, and a rAF pan loop.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use **`gsap` (npm) only** — no plugins (no ScrollTrigger, no SplitText), no Lenis. Import as:
```js
import gsap from "gsap";
```
All logic runs inside a `DOMContentLoaded` listener. The load reveal and the two zoom transitions use `gsap.to` / `gsap.timeline`; the drag-pan uses a plain `lerp` + `requestAnimationFrame` loop (not GSAP).
## Layout / HTML
```html
<body>
…

Premium prompt

Unlock this prompt, and every other one

From $99/year, or $139 once for lifetime access. Commercial license included.

See pricing Or start with the free set Already bought? Sign in

New components in your inbox

One email a week, only when new components ship, each with its live demo and prompt.