1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: nav-overlay-fullscreen-quiet
import gsap from 'https://esm.sh/gsap@3.12.5';
const trigger = document.querySelector('[data-nav-open]');
const overlay = document.querySelector('[data-nav-overlay]');
let isOpen = false;
trigger.addEventListener('click', () => {
isOpen = !isOpen;
if (isOpen) {
gsap.to(overlay, { autoAlpha: 1, duration: 1.0, ease: 'power2.out' });
gsap.from(overlay.querySelectorAll('[data-animate]'), { y: 20, autoAlpha: 0, stagger: 0.08, duration: 1.0, ease: 'power2.out', delay: 0.2 });
} else {
gsap.to(overlay, { autoAlpha: 0, duration: 0.6, ease: 'power2.inOut' });
}
}); 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: nav-overlay-fullscreen-quiet -->
<button data-nav-open>Open</button>
<div data-nav-overlay>
<nav><a data-animate href="#">Link</a></nav>
</div>
3. Styling-template — verplicht eigen invulling per merk
/* Styling: nav-overlay-fullscreen-quiet */
[data-nav-overlay] { position: fixed; inset: 0; background: rgba(244,241,235,0.97); opacity: 0; visibility: hidden; display: grid; place-items: center; }