1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: gallery-pinned-horizontal-gallery
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('.phg-track');
const sec=document.querySelector('.phg-section');
const dist=()=>track.scrollWidth - sec.offsetWidth;
gsap.to(track,{x:()=>-dist(),ease:'none',scrollTrigger:{
trigger:sec,start:'top top',end:()=>'+='+dist(),
pin:true,scrub:1,anticipatePin:1,invalidateOnRefresh:true
}}); 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: gallery-pinned-horizontal-gallery -->
<section class="phg-section">
<div class="phg-track">
<figure class="phg-panel"><canvas data-i="0"></canvas><figcaption>01 · Atrium</figcaption></figure>
<!-- 5 panels totaal -->
</div>
</section> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: gallery-pinned-horizontal-gallery — image-tiles, caption-overlay, foto-collage */
.phg-section{background:#0d0d0d;color:#F4F1EB;height:100vh;overflow:hidden}
.phg-track{display:flex;height:100%;width:max-content;gap:1.5rem;padding:clamp(2rem,5vw,4rem)}
.phg-panel{flex:0 0 70vw;height:calc(100% - 2 * clamp(2rem,5vw,4rem));margin:0;position:relative;overflow:hidden}
.phg-panel canvas{width:100%;height:100%;display:block}
.phg-panel figcaption{position:absolute;left:1.5rem;bottom:1.25rem;font-family:'Inter',sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#F4F1EB;background:rgba(10,10,10,.55);padding:.5rem .8rem;backdrop-filter:blur(6px)}