1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: cta-scrub-banner-editorial (techniek #8 — pin + scrub)
// Pin de section, scrub side-to-side x-translatie op italic Fraunces "Begin again."
// Side-eyebrow + horizontale rule die uitlijnt vanaf de zijkant tijdens scrub.
import gsap from 'https://esm.sh/[email protected]';
import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const sec = document.querySelector('.ed-scrub-section');
if (sec && !reduce) {
gsap.to('.ed-scrub-track', {
xPercent: -45, ease:'expo.out',
scrollTrigger: { trigger: sec, start:'top top', end:'+=120%', pin:true, scrub:1.2 }
});
gsap.fromTo('.ed-rule', { scaleX:0 }, {
scaleX:1, transformOrigin:'left', ease:'expo.out',
scrollTrigger: { trigger: sec, start:'top top', end:'+=80%', scrub:true }
});
} 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: cta-scrub-banner-editorial -->
<section class="ed-scrub-section">
<aside class="ed-eyebrow">Issue 04 — Spring</aside>
<hr class="ed-rule" />
<div class="ed-scrub-track">
<em class="ed-banner">Begin again.</em>
<em class="ed-banner">Begin again.</em>
</div>
<a class="ed-cta" href="#">Read the manifesto</a>
</section> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: cta-scrub-banner-editorial */
:root { --block-bg:#F4F1EB; --block-fg:#1F1A14; --block-accent:#7B3F2A; }
.ed-scrub-section { min-height:100vh; background:#F4F1EB; color:#1F1A14; font-family:'Fraunces', serif; overflow:hidden; }
.ed-eyebrow { font-family:'JetBrains Mono', monospace; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:#7B3F2A; }
.ed-rule { border:0; height:1px; background:#1F1A14; margin:1rem 0 3rem; }
.ed-banner { font-style:italic; font-weight:300; font-size:clamp(4rem, 14vw, 14rem); letter-spacing:-.04em; line-height:.95; }
.ed-cta { font-family:'Fraunces', serif; font-size:1.1rem; font-style:italic; color:#7B3F2A; border-bottom:1px solid currentColor; }