Infinite draggable canvas

<!-- Page settings → Before </body> tag --> <script> document.addEventListener("DOMContentLoaded", () => { gsap.registerPlugin(Draggable, InertiaPlugin, Observer, Flip); const stage = document.querySelector(".canvas_stage"); const scrim = document.querySelector(".canvas_scrim"); const tiles = gsap.utils.toArray(".canvas_tile"); const COLS = 9, ROWS = 5, TW = 260, TH = 330; const totalW = COLS * TW, totalH = ROWS * TH; // THE trick. wrap() folds any number back into a range, so a tile leaving // the right edge IS the tile arriving on the left. Nothing is cloned. const wrapX = gsap.utils.wrap(-TW, totalW - TW); const wrapY = gsap.utils.wrap(-TH, totalH - TH); const base = tiles.map((_, i) => ({ x: (i % COLS) * TW, y: Math.floor(i / COLS) * TH })); const setX = tiles.map(t => gsap.quickSetter(t, "x", "px")); const setY = tiles.map(t => gsap.quickSetter(t, "y", "px")); // ONE piece of state. Drag, inertia and wheel all write here. const offset = { x: 0, y: 0 }; const centre = () => { offset.x = (stage.offsetWidth - totalW) / 2; offset.y = (stage.offsetHeight - totalH) / 2; }; centre(); let frozen = false; function render() { if (frozen) return; for (let i = 0; i < tiles.length; i++) { setX[i](wrapX(base[i].x + offset.x)); setY[i](wrapY(base[i].y + offset.y)); } } render(); // ── drag: an invisible proxy, never the tiles themselves ──────────── const proxy = document.createElement("div"); let px = 0, py = 0, moved = false; const drag = Draggable.create(proxy, { trigger: stage, // drag anywhere on the field type: "x,y", inertia: true, onPress() { gsap.killTweensOf(offset); px = this.x; py = this.y; moved = false; stage.classList.add("is-dragging"); }, onRelease(){ stage.classList.remove("is-dragging"); }, onDrag() { moved = true; step(this); }, onThrowUpdate(){ step(this); } })[0]; function step(d) { offset.x += d.x - px; offset.y += d.y - py; px = d.x; py = d.y; render(); } // ── wheel / trackpad: same offset, so the two inputs cannot disagree ─ Observer.create({ target: stage, type: "wheel", preventDefault: true, onChange: self => gsap.to(offset, { x: offset.x - self.deltaX * 1.6, y: offset.y - self.deltaY * 1.6, duration: 0.9, ease: "power3.out", overwrite: true, onUpdate: render }) }); // ── click to zoom — the Flip gallery's pattern, plus a freeze ────────── const overlay = document.querySelector(".canvas_overlay"); let openFrame = null, openHome = null; function close() { if (!openFrame) return; const frame = openFrame, home = openHome; openFrame = openHome = null; gsap.to(scrim, { opacity: 0, duration: 0.35, pointerEvents: "none" }); const state = Flip.getState(frame); frame.classList.remove("is-open"); home.appendChild(frame); // back into its tile Flip.from(state, { duration: 0.6, ease: "power3.inOut", absolute: true, onComplete: () => { frozen = false; drag.enable(); render(); } }); } tiles.forEach(tile => tile.addEventListener("click", () => { if (moved) return; // a drag that ends on a tile is not a click if (openFrame) return close(); // Freeze FIRST. Flip and a per-frame transform loop cannot both own // the same element — one of them has to stand down. frozen = true; drag.disable(); const frame = tile.querySelector(".canvas_tile-frame"); openFrame = frame; openHome = tile; const state = Flip.getState(frame); // Every tile carries a transform, and a transformed ancestor becomes the // containing block for position:fixed — so "fixed" would resolve against // the tile, not the viewport. Move the node out. Animating a DOM move is // the entire reason Flip exists. overlay.appendChild(frame); frame.classList.add("is-open"); Flip.from(state, { duration: 0.7, ease: "power3.inOut", absolute: true }); gsap.to(scrim, { opacity: 1, duration: 0.45, pointerEvents: "auto" }); })); scrim.addEventListener("click", close); document.addEventListener("keydown", e => e.key === "Escape" && close()); addEventListener("resize", () => { centre(); render(); }); }); </script>