Patterns Medium

Clip-Path Lightbox Expand

Gallery lightbox that expands from the clicked card's exact position using GSAP clip-path animation. Computes inset() coordinates from getBoundingClientRect, animates to fullscreen and back. Full keyboard navigation.

Open in Lab

gsap clip-path lightbox keyboard-nav scrolltrigger

Targets: JS HTML

Code

/* ── Demo 51: Clip-Path Lightbox ── */
/* Muted dark green/navy with vibrant card accents */

:root {
  --bg: #0a0c10;
  --panel: #121620;
  --border: #1e2430;
  --text: #e8eaf0;
  --muted: #6870888;
  --muted: #687088;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

/* ── Page layout ── */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2.5rem 8rem;
}

.page-header {
  margin-bottom: 4rem;
}

.page-header h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  color: var(--text);
}

.page-header h1 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.4);
}

.page-header p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 480px;
}

.page-header code {
  font-family: 'SF Mono', monospace;
  font-size: 0.8rem;
  color: #60c8ff;
  background: rgba(96, 200, 255, 0.1);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

/* ── Gallery ── */
.gallery-section { }

.gallery-label { margin-bottom: 1.5rem; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 12px;
}

/* ── Gallery cards ── */
.gallery-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--border);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gallery-card--wide {
  grid-column: span 2;
  aspect-ratio: 16/9;
}

.gallery-card:hover {
  transform: scale(1.02);
  z-index: 2;
}

/* Card art backgrounds */
.gc-art {
  position: absolute;
  inset: 0;
  transition: transform 0.5s ease;
}

.gallery-card:hover .gc-art {
  transform: scale(1.06);
}

.gc-art--1 {
  background:
    radial-gradient(ellipse at 40% 30%, rgba(160, 60, 255, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(0, 180, 255, 0.3) 0%, transparent 45%),
    linear-gradient(160deg, #1a0a2e 0%, #0a0418 100%);
}
.gc-art--2 {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(40, 200, 80, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(20, 140, 60, 0.2) 0%, transparent 40%),
    linear-gradient(160deg, #0a1a10 0%, #040c08 100%);
}
.gc-art--3 {
  background:
    radial-gradient(ellipse at 60% 40%, rgba(255, 140, 30, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(200, 80, 0, 0.3) 0%, transparent 45%),
    linear-gradient(160deg, #1a0e00 0%, #0c0600 100%);
}
.gc-art--4 {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(0, 180, 255, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse at 80% 30%, rgba(0, 100, 220, 0.25) 0%, transparent 50%),
    linear-gradient(160deg, #001018 0%, #000c14 100%);
}
.gc-art--5 {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 30, 80, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(180, 0, 120, 0.25) 0%, transparent 45%),
    linear-gradient(160deg, #18000a 0%, #0e0004 100%);
}

.gc-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.25rem 1.25rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.gc-info h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.gc-info span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
}

.gc-expand-hint {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.gallery-card:hover .gc-expand-hint {
  opacity: 1;
  background: rgba(255,255,255,0.1);
}

/* ── Lightbox ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #060810;
  display: grid;
  grid-template-columns: 1fr 380px;
  /* clip-path starts as an inset rectangle matching the clicked card */
  clip-path: inset(0 0 0 0 round 4px);
}

.lightbox[hidden] {
  display: none;
}

.lb-art {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.lb-content {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--border);
  overflow: auto;
}

.lb-meta {
  margin-bottom: 1.5rem;
}

.lb-title {
  font-family: 'Syne', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.4rem;
  line-height: 1.1;
}

.lb-sub {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.lb-body {
  font-size: 0.95rem;
  color: rgba(232, 234, 240, 0.7);
  line-height: 1.85;
  margin-bottom: 2.5rem;
}

.lb-close {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 2px;
  align-self: flex-start;
  transition: border-color 0.2s, color 0.2s;
}

.lb-close:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--text);
}

/* Nav buttons */
.lb-nav {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  gap: 0.5rem;
}

.lb-prev, .lb-next {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.5);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

.lb-prev:hover, .lb-next:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-card--wide { grid-column: span 2; }
  .lightbox { grid-template-columns: 1fr; }
  .lb-content { border-left: none; border-top: 1px solid var(--border); max-height: 40vh; }
}

@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-card--wide { grid-column: auto; aspect-ratio: 3/4; }
  .page { padding: 3rem 1.25rem 5rem; }
}

/* ── Reduced motion ── */
html.reduced-motion .gallery-card {
  transition: none;
}
html.reduced-motion .gc-art {
  transition: none;
}

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

initDemoShell({
  title: "Clip-Path Lightbox",
  category: "css-canvas",
  tech: ["gsap", "clip-path", "lightbox", "keyboard-nav"],
});

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add("reduced-motion");

// ── Card data ─────────────────────────────────────────────────────────────────
const cards = Array.from(document.querySelectorAll(".gallery-card"));
const lightbox = document.getElementById("lightbox");
const lbArt = document.getElementById("lb-art");
const lbTitle = document.getElementById("lb-title");
const lbSub = document.getElementById("lb-sub");
const lbBody = document.getElementById("lb-body");
const lbClose = document.getElementById("lb-close");
const lbPrev = document.getElementById("lb-prev");
const lbNext = document.getElementById("lb-next");

let currentIndex = -1;
let isOpen = false;

// ── Get the card's screen rect expressed as CSS inset ─────────────────────────
function getInsetFromRect(rect) {
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  const top = rect.top;
  const right = vw - rect.right;
  const bottom = vh - rect.bottom;
  const left = rect.left;
  return { top, right, bottom, left };
}

function insetToString({ top, right, bottom, left }) {
  return `inset(${top}px ${right}px ${bottom}px ${left}px round 4px)`;
}

// ── Open lightbox ─────────────────────────────────────────────────────────────
function openLightbox(index) {
  const card = cards[index];
  const rect = card.getBoundingClientRect();
  const inset = getInsetFromRect(rect);

  currentIndex = index;
  isOpen = true;

  // Populate content
  const d = card.dataset;
  const artClass = card
    .querySelector(".gc-art")
    .className.split(" ")
    .find((c) => c.startsWith("gc-art--"));
  lbArt.className = "lb-art " + artClass;
  lbTitle.textContent = d.title;
  lbSub.textContent = d.sub;
  lbBody.textContent = d.body;

  // Show the lightbox — start clipped to card position
  lightbox.removeAttribute("hidden");
  gsap.set(lightbox, { clipPath: insetToString(inset) });

  // Animate to fullscreen
  if (!reduced) {
    gsap.to(lightbox, {
      clipPath: "inset(0px 0px 0px 0px round 0px)",
      duration: 0.55,
      ease: "expo.out",
    });

    // Content reveals after clip path opens
    gsap.set([lbTitle, lbSub, lbBody, lbClose], { opacity: 0, y: 16 });
    gsap.to([lbTitle, lbSub, lbBody, lbClose], {
      opacity: 1,
      y: 0,
      duration: 0.5,
      stagger: 0.07,
      ease: "expo.out",
      delay: 0.3,
    });
  } else {
    gsap.set(lightbox, { clipPath: "inset(0px 0px 0px 0px round 0px)" });
  }

  document.body.style.overflow = "hidden";
  lbClose.focus();
}

// ── Close lightbox ────────────────────────────────────────────────────────────
function closeLightbox() {
  if (!isOpen) return;
  const card = cards[currentIndex];
  const rect = card.getBoundingClientRect();
  const inset = getInsetFromRect(rect);

  if (!reduced) {
    gsap.to(lightbox, {
      clipPath: insetToString(inset),
      duration: 0.45,
      ease: "expo.in",
      onComplete: () => {
        lightbox.setAttribute("hidden", "");
        gsap.set(lightbox, { clipPath: "" });
        isOpen = false;
      },
    });
  } else {
    lightbox.setAttribute("hidden", "");
    isOpen = false;
  }

  document.body.style.overflow = "";
  cards[currentIndex].focus();
}

// ── Navigate ──────────────────────────────────────────────────────────────────
function navigateTo(index) {
  const nextIndex = (index + cards.length) % cards.length;

  if (!reduced) {
    // Slide content out, update, slide in
    gsap.to([lbTitle, lbSub, lbBody], {
      opacity: 0,
      y: -12,
      duration: 0.2,
      ease: "power2.in",
      onComplete: () => {
        currentIndex = nextIndex;
        const d = cards[nextIndex].dataset;
        const artClass = cards[nextIndex]
          .querySelector(".gc-art")
          .className.split(" ")
          .find((c) => c.startsWith("gc-art--"));
        lbArt.className = "lb-art " + artClass;
        lbTitle.textContent = d.title;
        lbSub.textContent = d.sub;
        lbBody.textContent = d.body;

        gsap.fromTo(
          [lbTitle, lbSub, lbBody],
          { opacity: 0, y: 12 },
          {
            opacity: 1,
            y: 0,
            duration: 0.35,
            stagger: 0.06,
            ease: "expo.out",
          }
        );
      },
    });
  } else {
    currentIndex = nextIndex;
    const d = cards[nextIndex].dataset;
    const artClass = cards[nextIndex]
      .querySelector(".gc-art")
      .className.split(" ")
      .find((c) => c.startsWith("gc-art--"));
    lbArt.className = "lb-art " + artClass;
    lbTitle.textContent = d.title;
    lbSub.textContent = d.sub;
    lbBody.textContent = d.body;
  }
}

// ── Event listeners ───────────────────────────────────────────────────────────
cards.forEach((card, i) => {
  card.addEventListener("click", () => openLightbox(i));
  card.setAttribute("tabindex", "0");
  card.setAttribute("role", "button");
  card.setAttribute("aria-label", `Open ${card.dataset.title}`);
  card.addEventListener("keydown", (e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      openLightbox(i);
    }
  });
});

lbClose.addEventListener("click", closeLightbox);
lbPrev.addEventListener("click", () => navigateTo(currentIndex - 1));
lbNext.addEventListener("click", () => navigateTo(currentIndex + 1));

document.addEventListener("keydown", (e) => {
  if (!isOpen) return;
  if (e.key === "Escape") closeLightbox();
  if (e.key === "ArrowLeft") navigateTo(currentIndex - 1);
  if (e.key === "ArrowRight") navigateTo(currentIndex + 1);
});

// ── Entrance animations ───────────────────────────────────────────────────────
if (!reduced) {
  gsap.set(".page-header > *", { opacity: 0, y: 20 });
  gsap.to(".page-header > *", {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.1,
    ease: "expo.out",
    delay: 0.3,
  });

  cards.forEach((card, i) => {
    gsap.set(card, { opacity: 0, scale: 0.96 });
    gsap.to(card, {
      opacity: 1,
      scale: 1,
      duration: 0.7,
      ease: "expo.out",
      delay: i * 0.08,
      scrollTrigger: {
        trigger: ".gallery-grid",
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  });
}

// ── Motion toggle ─────────────────────────────────────────────────────────────
window.addEventListener("motion-preference", (e) => {
  gsap.globalTimeline.paused(e.detail.reduced);
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clip-Path Lightbox Expand</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"https://esm.sh/gsap@3.13.0","gsap/ScrollTrigger":"https://esm.sh/gsap@3.13.0/ScrollTrigger","gsap/SplitText":"https://esm.sh/gsap@3.13.0/SplitText","gsap/Flip":"https://esm.sh/gsap@3.13.0/Flip","gsap/ScrambleTextPlugin":"https://esm.sh/gsap@3.13.0/ScrambleTextPlugin","gsap/TextPlugin":"https://esm.sh/gsap@3.13.0/TextPlugin","gsap/all":"https://esm.sh/gsap@3.13.0/all","gsap/":"https://esm.sh/gsap@3.13.0/","lenis":"https://esm.sh/lenis@1.1.13/dist/lenis.mjs","three":"https://esm.sh/three@0.171.0","three/addons/":"https://esm.sh/three@0.171.0/examples/jsm/"}}</script>
</head>
<body>

  <div class="page">

    <header class="page-header">
      <span class="label">Technique Demo</span>
      <h1>Clip-Path<br><em>Lightbox</em></h1>
      <p>Cards expand to fullscreen using <code>clip-path: inset()</code> animated from the card's exact position and size. No fixed positioning — pure geometric expansion.</p>
    </header>

    <!-- Gallery grid -->
    <section class="gallery-section">
      <div class="gallery-label">
        <span class="label">Click any card to expand</span>
      </div>
      <div class="gallery-grid" id="gallery-grid">

        <article class="gallery-card" data-id="1" data-color-a="#1a0a2e" data-color-b="#4a1060" data-accent="#c060ff" data-title="Aurora Study" data-sub="Iceland · 2024" data-body="Shot at 2am during peak solar activity. The entire sky moved like a living thing — cyan ribbons folding into violet, then pink.">
          <div class="gc-art gc-art--1" aria-hidden="true"></div>
          <div class="gc-info">
            <h3>Aurora Study</h3>
            <span>Iceland · 2024</span>
          </div>
          <div class="gc-expand-hint" aria-hidden="true">→</div>
        </article>

        <article class="gallery-card" data-id="2" data-color-a="#0a1a10" data-color-b="#0a3020" data-accent="#40e080" data-title="Forest Floor" data-sub="Patagonia · 2023" data-body="Six hours lying prone in the undergrowth. Waiting for the light to move through the canopy at exactly the right angle.">
          <div class="gc-art gc-art--2" aria-hidden="true"></div>
          <div class="gc-info">
            <h3>Forest Floor</h3>
            <span>Patagonia · 2023</span>
          </div>
          <div class="gc-expand-hint" aria-hidden="true">→</div>
        </article>

        <article class="gallery-card" data-id="3" data-color-a="#1a1000" data-color-b="#3a2000" data-accent="#ff9020" data-title="Desert Dusk" data-sub="Atacama · 2024" data-body="The world's driest desert at the moment the sun disappears. Silence so complete you can hear your heartbeat.">
          <div class="gc-art gc-art--3" aria-hidden="true"></div>
          <div class="gc-info">
            <h3>Desert Dusk</h3>
            <span>Atacama · 2024</span>
          </div>
          <div class="gc-expand-hint" aria-hidden="true">→</div>
        </article>

        <article class="gallery-card gallery-card--wide" data-id="4" data-color-a="#001018" data-color-b="#001a28" data-accent="#20c0ff" data-title="Midnight Ocean" data-sub="Pacific · 2023" data-body="Three days at sea on a research vessel. Bioluminescent plankton turned every wave into a streak of blue fire.">
          <div class="gc-art gc-art--4" aria-hidden="true"></div>
          <div class="gc-info">
            <h3>Midnight Ocean</h3>
            <span>Pacific · 2023</span>
          </div>
          <div class="gc-expand-hint" aria-hidden="true">→</div>
        </article>

        <article class="gallery-card" data-id="5" data-color-a="#18000a" data-color-b="#300015" data-accent="#ff2060" data-title="Tokyo Neon" data-sub="Tokyo · 2024" data-body="Shinjuku at 3am. The streets belong to the signs, the rain, and whoever chooses to walk through it.">
          <div class="gc-art gc-art--5" aria-hidden="true"></div>
          <div class="gc-info">
            <h3>Tokyo Neon</h3>
            <span>Tokyo · 2024</span>
          </div>
          <div class="gc-expand-hint" aria-hidden="true">→</div>
        </article>

      </div>
    </section>

  </div>

  <!-- Lightbox overlay -->
  <div class="lightbox" id="lightbox" aria-modal="true" aria-label="Image lightbox" hidden>
    <div class="lb-art" id="lb-art" aria-hidden="true"></div>
    <div class="lb-content">
      <div class="lb-meta">
        <h2 class="lb-title" id="lb-title"></h2>
        <span class="lb-sub" id="lb-sub"></span>
      </div>
      <p class="lb-body" id="lb-body"></p>
      <button class="lb-close" id="lb-close" aria-label="Close lightbox">✕ Close</button>
    </div>
    <div class="lb-nav">
      <button class="lb-prev" id="lb-prev" aria-label="Previous">←</button>
      <button class="lb-next" id="lb-next" aria-label="Next">→</button>
    </div>
  </div>

  <script type="module" src="script.js"></script>
</body>
</html>

Gallery lightbox that expands from the clicked card’s exact position using GSAP clip-path animation. Computes inset() coordinates from getBoundingClientRect, animates to fullscreen and back. Full keyboard navigation.

Source

Repository: libs-genclaude
Original demo id: 51-clip-path-lightbox

Code

Clip-Path Lightbox Expand

Source

Notes