Gallery Clip Wipe Grid Editorial — Motion Lab

— Chapter III

Quiet materials, in slow rooms.

A short visual essay on texture and patience, photographed across two winters in northern light.

No. 01 Atelier Nord — March

No. 02 Linen, study no. 4

No. 03 Window, afternoon

No. 04 Stone, raw cut

No. 05 Vessel, cold press

No. 06 Field, late October

No. 07 Folded paper

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: gallery-clip-wipe-grid-editorial
import gsap from 'https://esm.sh/[email protected]';
import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
gsap.set('.cwe-tile', { clipPath: 'inset(0 0 0 100%)' });
ScrollTrigger.batch('.cwe-tile', {
  start: 'top 92%',
  onEnter: batch => gsap.to(batch, {
    clipPath: 'inset(0 0 0 0)', duration: 1.4, ease: 'expo.out', stagger: 0.1
  }),
});

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: gallery-clip-wipe-grid-editorial -->
<section class="cwe">
  <div class="cwe__intro">
    <span class="cwe__chap">— Chapter III</span>
    <h2 class="cwe__title">Quiet <em>materials</em></h2>
    <p class="cwe__lede">A short visual essay...</p>
  </div>
  <div class="cwe__grid">
    <figure class="cwe-tile cwe-tile--lg">
      <div class="cwe-tile__img"></div>
      <figcaption><em>Atelier Nord</em> — March</figcaption>
    </figure>
  </div>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: gallery-clip-wipe-grid-editorial */
:root {
  --cwe-paper: #F4F1EB;
  --cwe-ink: #1B1A17;
}
.cwe { background: var(--cwe-paper); font-family: 'Fraunces', serif; }
.cwe__title em { font-style: italic; font-weight: 300; }
.cwe-tile figcaption { font-style: italic; }