# Infinite Draggable Image Gallery ## Goal Build a full-viewport, **infinitely draggable image gallery**: an endless grid of small portrait thumbnails on a pale canvas that you grab and pan in any direction forever (DOM items are virtualized — created/destroyed as they enter/leave a buffered viewport), with a **lerp-smoothed drag and velocity-based momentum** on release. Clicking a thumbnail is the star moment: the tile hides, every other tile fades out, a pale overlay closes in, and a **fixed clone of the image expands from the thumbnail's exact spot to a large centered frame via a single GSAP `fromTo` tween on a custom "hop" ease**, while the project's title **staggers up word-by-word from behind a clip mask** (SplitType). Clicking the expanded image or the overlay reverses everything back into the grid. ## Tech Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugin **`CustomEase`**, and **`split-type`** (npm, default export `SplitType`) for the word splitting. No ScrollTrigger, no Lenis — the page never scrolls (`body { overflow: hidden }`); all motion is a custom `requestAnimationFrame` lerp loop plus GSAP tweens. Ship `index.html`, `styles.css`, an ES-module `script.js`, and a tiny `items.js` data module. Register and create the custom ease once at startup: ```js gsap.registerPlugin(CustomEase); CustomEase.create("hop", "0.9, 0, 0.1, 1"); ``` `"hop"` = cubic-bezier(0.9, 0, 0.1, 1): a heavy slow-in / slow-out snap used for both the expand and the collapse. ## Layout / HTML ```html

``` - `.container` — the full-viewport drag surface (all mouse/touch listeners hang off it). - `.canvas` — the infinite plane; the JS translates this element and appends/removes `.item` tiles inside it. - `.overlay` — a full-screen pale scrim toggled with a CSS class during the expanded state. - `.project-title p` — starts empty; the JS injects the clicked project's title and splits it into words. `items.js` exports a default array of 20 short, evocative two-word project titles (index i pairs with image i+1), e.g.: ```js const items = [ "Chromatic Loopscape", "Solar Bloom", "Neon Handscape", "Echo Discs", "Void Gaze", "Gravity Sync", "Heat Core", "Fractal Mirage", "Nova Pulse", "Sonic Horizon", "Dream Circuit", "Lunar Mesh", "Radiant Dusk", "Pixel Drift", "Vortex Bloom", "Shadow Static", "Crimson Phase", "Retro Cascade", "Photon Fold", "Zenith Flow", ]; export default items; ``` ## Styling - Import the Google font **Inter** (variable weights). `* { margin:0; padding:0; box-sizing:border-box; user-select:none; }` - `body`: `font-family:"Inter",sans-serif; background-color:#e3e3db; overflow:hidden;` — a warm pale-grey/bone canvas. - `a, p`: `display:block; text-decoration:none; color:#fff; font-size:14px; font-weight:600; letter-spacing:-0.01rem; -webkit-font-smoothing:antialiased;` - `nav, footer`: `position:absolute; left:0; width:100vw; padding:1em; display:flex; justify-content:space-between; gap:2em; mix-blend-mode:difference; z-index:10000;` — nav pinned `top:0`, footer `bottom:0`. The `mix-blend-mode:difference` makes the white UI text invert over whatever passes beneath (dark thumbnails vs pale background). - `.links, .socials`: `display:flex; gap:2em;` and `nav > *, .links a { flex:1; }` - `.container`: `position:relative; width:100vw; height:100vh; overflow:hidden; cursor:grab;` - `.canvas`: `position:absolute; will-change:transform;` - `.item`: `position:absolute; width:120px; height:160px; overflow:hidden; background-color:#000; cursor:pointer;` — small 3:4 portrait tiles. - `.expanded-item`: `position:fixed; z-index:100; top:50%; left:50%; transform:translate(-50%,-50%); background-color:#e3e3db; overflow:hidden; cursor:pointer;` — the clone lives dead-center; GSAP `x`/`y` offsets move it relative to the viewport center. - `img`: `width:100%; height:100%; object-fit:cover; pointer-events:none;` - `.overlay`: `position:fixed; top:0; left:0; width:100%; height:100%; background-color:#e3e3db; pointer-events:none; transition:opacity 0.3s ease; opacity:0; z-index:2;` — with `.overlay.active { pointer-events:auto; opacity:1; }`. Note z-index 2: it covers the grid but sits *under* the `.expanded-item` (z 100) and the nav/footer/title (z 10000). - `.project-title`: `position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; pointer-events:none; z-index:10000;` - `.project-title p`: `position:relative; height:42px; color:#fff; clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);` — the fixed-height box + clip-path is the **mask** the words rise out of. - `.project-title p .word`: `position:relative; display:inline-block; font-family:"Inter"; font-size:36px; letter-spacing:-0.02rem; margin-right:0.1em; transform:translateY(0%); will-change:transform;` (the `.word` class is what SplitType produces). ## GSAP effect — be exhaustive ### Constants & state ```js const itemCount = 20; // distinct images const itemGap = 150; // px between tiles const columns = 4; // used only in the image-index formula const itemWidth = 120, itemHeight = 160; ``` State variables: `isDragging`, `startX/startY`, `targetX/targetY` (where the canvas wants to be), `currentX/currentY` (where it is), `dragVelocityX/Y`, `lastDragTime`, `mouseHasMoved`, `visibleItems` (a `Set` of ids), `lastUpdateTime`, `lastX/lastY`, `isExpanded`, `activeItem`, `canDrag` (starts `true`), `originalPosition`, `expandedItem`, `activeItemId`, `titleSplit`. ### 1) The infinite pan — rAF lerp loop An endless `requestAnimationFrame` loop `animate()`: - Only while `canDrag`: lerp with factor **0.075** — `currentX += (targetX - currentX) * 0.075;` (same for Y), then `canvas.style.transform = translate(currentX px, currentY px)`. - Track how far the canvas moved since the last virtualization pass; call `updateVisibleItems()` when **distance moved > 100px** OR **more than 120ms** elapsed, then store `lastX/lastY/lastUpdateTime`. - Always re-queue `requestAnimationFrame(animate)`. **Mouse drag** (listeners: `mousedown` on `.container`, `mousemove`/`mouseup` on `window`): - `mousedown` (ignored unless `canDrag`): `isDragging = true`, `mouseHasMoved = false`, record `startX/startY = e.clientX/Y`, set `container.style.cursor = "grabbing"`. - `mousemove` (only while dragging and `canDrag`): `dx/dy` = movement since the previous event; if `|dx| > 5 || |dy| > 5` set `mouseHasMoved = true` (this later suppresses the click-to-expand). Compute `dt = max(10, now - lastDragTime)` in ms and per-ms velocities `dragVelocityX = dx/dt`, `dragVelocityY = dy/dt`. Then **add** the deltas to the target: `targetX += dx; targetY += dy;` and reset `startX/startY` to the current pointer. - `mouseup`: stop dragging, restore `cursor:"grab"`; **momentum** — if `|dragVelocityX| > 0.1 || |dragVelocityY| > 0.1`, throw the canvas: `targetX += dragVelocityX * 200; targetY += dragVelocityY * 200;` (momentumFactor = 200). The 0.075 lerp turns that offset into a smooth glide-out. **Touch drag**: `touchstart` on the container and `touchmove`/`touchend` on window mirror the mouse logic (same 5px `mouseHasMoved` threshold, `targetX/Y += dx/dy`), but **no momentum** is applied on `touchend`. ### 2) Virtualized infinite grid — `updateVisibleItems()` The grid is conceptually infinite in all four directions; only tiles near the viewport exist in the DOM. - `buffer = 2.5`; `viewWidth = innerWidth * 3.5`, `viewHeight = innerHeight * 3.5`. - Determine travel direction: `movingRight = targetX > currentX`, `movingDown = targetY > currentY`; direction buffers `directionBufferX = movingRight ? -300 : 300` (same for Y) extend the window toward where you're heading. - Column/row range (cell pitch = `itemWidth + itemGap` = 270 horizontally, `itemHeight + itemGap` = 310 vertically): ```js startCol = Math.floor((-currentX - viewWidth/2 + (movingRight ? directionBufferX : 0)) / (itemWidth + itemGap)); endCol = Math.ceil ((-currentX + viewWidth*1.5 + (!movingRight ? directionBufferX : 0)) / (itemWidth + itemGap)); // startRow/endRow identical with currentY, viewHeight, movingDown, itemHeight ``` - For every `(col,row)` in range: id = `"${col},${row}"`. Skip if already in `visibleItems`, or if it is the currently-expanded tile (`activeItemId === id && isExpanded`). Otherwise create `
` at `left = col * (itemWidth+itemGap)`, `top = row * (itemHeight+itemGap)` (store `dataset.col/row`), containing an `` whose image number is ```js const itemNum = (Math.abs(row * columns + col) % itemCount) + 1; // 1..20 img.src = `/path/to/img${itemNum}.jpg`; ``` so the 20 images tile deterministically across the infinite plane. Attach a `click` listener that bails if `mouseHasMoved || isDragging`, else calls `handleItemClick(item)`. Append to the canvas and register in `visibleItems`. - Finally sweep `visibleItems`: remove any DOM item whose id fell out of the current range (or that is the active expanded tile) and delete it from the set. ### 3) Click → expand (the hero tween) `handleItemClick` toggles: if already expanded → close; else `expandItem(item)`: 1. Flags: `isExpanded = true`, `activeItem = item`, `activeItemId = item.id`, `canDrag = false`, `container.style.cursor = "auto"`. 2. Parse the image number out of the tile's `img.src` (regex `/img(\d+)\.jpg/`); `titleIndex = (imgNum - 1) % items.length` → the matching title from `items.js`. 3. **Title setup** — `setAndAnimateTitle(title)`: if a previous `SplitType` instance exists, `revert()` it; set `projectTitleElement.textContent = title`; `titleSplit = new SplitType(el, { types: "words" })`; then `gsap.set(titleSplit.words, { y: "100%" })` so every word starts fully below the 42px clip mask. 4. Hide the source tile: `item.style.visibility = "hidden"`, and stash `originalPosition = { id, rect: item.getBoundingClientRect(), imgSrc }`. 5. `overlay.classList.add("active")` → the pale scrim fades in via its CSS `opacity 0.3s ease` transition and starts intercepting clicks. 6. Build the clone: `
` sized `120 × 160` px with the same ``, appended to ``; clicking it closes. 7. **Fade the grid**: every other `.item` → `gsap.to(el, { opacity: 0, duration: 0.3, ease: "power2.out" })`. 8. Target size: `targetWidth = window.innerWidth * 0.4`, `targetHeight = targetWidth * 1.2` (keeps the 3:4 portrait ratio, 40% of viewport width). 9. `gsap.delayedCall(0.5, animateTitleIn)` — the title starts rising halfway through the expansion. 10. **The expansion tween** (remember the clone is `position:fixed` centered with `translate(-50%,-50%)`, so `x/y` are offsets from the viewport center): ```js gsap.fromTo(expandedItem, { width: itemWidth, height: itemHeight, x: rect.left + itemWidth/2 - window.innerWidth/2, y: rect.top + itemHeight/2 - window.innerHeight/2 }, { width: targetWidth, height: targetHeight, x: 0, y: 0, duration: 1, ease: "hop" }); ``` i.e. it starts exactly over the clicked thumbnail (position + size) and lands dead-center at 40vw wide — one tween animating `width`, `height`, `x`, `y` together on the `"hop"` CustomEase. - `animateTitleIn()`: `gsap.to(titleSplit.words, { y: "0%", duration: 1, stagger: 0.1, ease: "power3.out" })` — words rise out of the clip mask left-to-right, 0.1s apart. ### 4) Close → collapse back `closeExpandedItem()` (fired by clicking the expanded image or the overlay): 1. `animateTitleOut()`: `gsap.to(titleSplit.words, { y: "-100%", duration: 1, stagger: 0.1, ease: "power3.out" })` — words exit **upward** through the mask (in from below, out through the top). 2. `overlay.classList.remove("active")` (CSS fades the scrim out over 0.3s). 3. Restore the grid: every `.item` except the active one → `gsap.to(el, { opacity: 1, duration: 0.5, delay: 0.5, ease: "power2.out" })` — they wait half a second, then fade back while the clone shrinks. 4. Reverse tween on the clone, back to the stored original rect: ```js gsap.to(expandedItem, { width: itemWidth, height: itemHeight, x: originalRect.left + itemWidth/2 - window.innerWidth/2, y: originalRect.top + itemHeight/2 - window.innerHeight/2, duration: 1, ease: "hop", onComplete: () => { /* cleanup */ } }); ``` In `onComplete`: remove the clone from the DOM, set the original tile (looked up by `activeItemId`) back to `visibility:"visible"`, null out `expandedItem/activeItem/originalPosition/activeItemId`, `isExpanded = false`, `canDrag = true`, `container.style.cursor = "grab"`, and zero both drag velocities. ### 5) Resize On `window.resize`: if currently expanded, re-fit the clone — `gsap.to(expandedItem, { width: innerWidth*0.4, height: innerWidth*0.4*1.2, duration: 0.3, ease: "power2.out" })`; otherwise just call `updateVisibleItems()`. ### 6) Boot Call `updateVisibleItems()` once, then start `animate()`. ## Assets / images **20 portrait images (3:4 aspect, e.g. 480×640+), named `img1.jpg` … `img20.jpg`**, tiled endlessly across the grid. They share one art direction: **abstract glossy 3D renders on black backgrounds** — iridescent chrome and holographic materials (stacked ribbon loops, twisted mobius waves, torus rings, coiled spring helixes, chrome chain links and a padlock, intersecting discs and cones, bundles of tubes, spiral drip forms, stylized reaching hands, an anatomical heart with an orbiting ring). Palette: oil-slick purples, magentas, oranges, golds and greens against deep black — the black tiles pop hard against the `#e3e3db` page and drive the `mix-blend-mode:difference` UI. Each image i pairs with title i in `items.js`. No text, no logos in the images. ## Behavior notes - The page never scrolls; the entire experience is the drag plane. Cursor: `grab` → `grabbing` while dragging → `auto` while expanded. - Works with mouse **and** touch; momentum-throw applies to mouse only. - The 5px `mouseHasMoved` threshold guarantees a drag never accidentally triggers an expand. - While expanded, dragging is fully disabled (`canDrag=false`) and the virtualization loop pauses (it runs inside the `canDrag` branch). - Item ids are `"col,row"` strings; virtualization keeps DOM size roughly constant no matter how far you pan. - Nav ("Motionprompts", About/Contact, FB/IG/YT) and footer ("Experiment 445" / "Drag to Explore") are static chrome in white, inverted by `mix-blend-mode:difference`.