← Blurr Motion gallery-pinned-horizontal-editorial
Categorie galleries Tier 1 Techniek #pinned-horizontal Deps gsap, ScrollTrigger

Issue 04 — Spring ’26

Of quiet rooms
and slow light.

A field study, in five plates. Words by the studio, plates by anyone passing through.

EditorialScroll →
I

Plate I

Atelier, 07:42

Linen folded on a chair, the cat indifferent. Coffee cooling, a pencil left mid-thought beside the window.

I / IVContinue →
II

Plate II

The long table

A conversation between objects: ceramic, paper, the residue of bread. Light moves slowly, in margins.

II / IVContinue →
III

Plate III

After the rain

The garden holds its breath. Stones, darker now, remember the weight of clouds.

III / IVContinue →
IV

Plate IV

Endpiece

A small thank you to the day. The studio closes. Tomorrow, plates begin again.

IV / IVFin.
1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: gallery-pinned-horizontal-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;
const track=document.querySelector('.phe-track');
const sec=document.querySelector('.phe-section');
const dist=()=>track.scrollWidth - sec.offsetWidth;
gsap.to(track,{x:()=>-dist(),ease:'expo.out',scrollTrigger:{
  trigger:sec,start:'top top',end:()=>'+='+dist(),
  pin:true,scrub:1.4,anticipatePin:1,invalidateOnRefresh:true
}});
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: gallery-pinned-horizontal-editorial -->
<section class="phe-section">
  <div class="phe-track">
    <article class="phe-panel phe-panel--cover">
      <p class="phe-folio">Issue 04 — Spring</p>
      <h2>Of <em>quiet</em> rooms<br/>and slow light.</h2>
      <p class="phe-deck">A field study, in five plates.</p>
    </article>
    <article class="phe-panel phe-panel--plate"><h3>Plate I</h3><p>Atelier, 7:42…</p></article>
    <!-- 4 plates totaal -->
  </div>
</section>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: gallery-pinned-horizontal-editorial — cream + Fraunces italic-mix, asymmetric */
.phe-section{background:#F4F1EB;color:#0A0A0A;height:100vh;overflow:hidden;position:relative}
.phe-track{display:flex;height:100%;width:max-content}
.phe-panel{flex:0 0 92vw;height:100%;padding:clamp(3rem,7vw,7rem) clamp(2rem,6vw,6rem);display:grid;align-content:center;border-right:1px solid rgba(10,10,10,.14)}
.phe-panel--cover h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(3rem,7vw,7rem);line-height:.95;letter-spacing:-.02em}
.phe-panel--cover h2 em{font-style:italic;color:#7a4f1c}
.phe-panel--plate h3{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:clamp(2rem,4vw,3.5rem);margin:0}
.phe-panel--plate p{font-family:'Fraunces',serif;font-weight:300;font-size:1.25rem;line-height:1.6;max-width:38ch}