Nav Sticky Pill Playful — Motion Lab

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

// Mechanisme: nav-sticky-pill-playful
import gsap from 'https://esm.sh/[email protected]';
import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const nav = document.querySelector('.pill-nav');
ScrollTrigger.create({
  start: 'top -80px',
  onEnter: () => gsap.to(nav, { y: 0, scale: 1, autoAlpha: 1, duration: 0.9, ease: 'back.out(1.7)' }),
  onLeaveBack: () => gsap.to(nav, { y: -20, scale: 0.95, autoAlpha: 0, duration: 0.7, ease: 'back.in(1.7)' })
});

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

<!-- Skeleton: nav-sticky-pill-playful -->
<nav class="pill-nav">
  <a href="#">Home</a>
  <a href="#">Work</a>
  <a href="#">About</a>
</nav>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: nav-sticky-pill-playful */
.pill-nav {
  position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%);
  background: #FF4A1C; color: white; border-radius: 999px;
  padding: 0.5rem 1.5rem; display: flex; gap: 1.5rem;
  box-shadow: 0 4px 24px rgba(255,74,28,.3);
}

Scroll downto reveal the pill.

Scroll down
to reveal the pill.