# Gooey Curve Fullscreen Menu
> Fullscreen menu that opens with a gooey curve wipe, staggered link reveals, triple-stripe hover, and an animated close button.
**Definition:** Gooey Curve Fullscreen Menu is a navigation UI animation from collections.html. It is built with HTML, CSS, JavaScript, and GSAP, ships with a live preview, and is free to copy into personal and commercial projects.
## Facts
- Category: Navigation
- Stack: HTML, CSS, JavaScript, and GSAP
- Added: 2026-09-06
- Canonical page: https://html.bosconvertpro.com/collection/gooey-curve-fullscreen-menu
- Full-page preview: https://html.bosconvertpro.com/collection/gooey-curve-fullscreen-menu/full
- Live demo: https://html.bosconvertpro.com/demos/gooey-curve-fullscreen-menu/index.html
- Markdown mirror: https://html.bosconvertpro.com/collection/gooey-curve-fullscreen-menu/index.md
- License: https://html.bosconvertpro.com/terms
## How to use
1. Open https://html.bosconvertpro.com/collection/gooey-curve-fullscreen-menu/full to preview the animation in full screen.
2. Copy index.html, styles.css, and script.js from the code tabs on https://html.bosconvertpro.com/collection/gooey-curve-fullscreen-menu.
3. Paste the files into your project and adjust timing, easing, and content as needed.
## FAQ
### What is Gooey Curve Fullscreen Menu?
Gooey Curve Fullscreen Menu is a navigation UI animation from collections.html. Fullscreen menu that opens with a gooey curve wipe, staggered link reveals, triple-stripe hover, and an animated close button.
### What is Gooey Curve Fullscreen Menu built with?
Gooey Curve Fullscreen Menu is built with HTML, CSS, JavaScript, and GSAP. The source for every file is shown on the animation page and can be copied straight into your project.
### How do I use Gooey Curve Fullscreen Menu in my project?
Open the animation page (https://html.bosconvertpro.com/collection/gooey-curve-fullscreen-menu), preview it live, then copy index.html, styles.css, and script.js from the code tabs. Paste the files into your project and adjust timing, easing, and content as needed. A standalone demo runs at https://html.bosconvertpro.com/demos/gooey-curve-fullscreen-menu/index.html.
### Is Gooey Curve Fullscreen Menu free to use?
Yes. The Gooey Curve Fullscreen Menu demo code may be used in personal and commercial projects. You may not resell or redistribute the collection itself as a competing template pack. Full terms: https://html.bosconvertpro.com/terms.
## Source — index.html
````html
ABBOS — Gooey Curve Fullscreen Menu
````
## Source — styles.css
````css
*{margin:0;padding:0;box-sizing:border-box}
@font-face{font-family:Matter;src:url(https://www.poppr.be/assets/fonts/matter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Matter;src:url(https://www.poppr.be/assets/fonts/matter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Matter;src:url(https://www.poppr.be/assets/fonts/matter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Matter;src:url(https://www.poppr.be/assets/fonts/matter-700.woff2) format("woff2");font-weight:700;font-display:swap}
html{
font-family:Matter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
-webkit-font-smoothing:antialiased;
font-size:min(4.26667vw,22px);
}
@media(min-width:800px){
html{font-size:max(12px,1.111111vw)}
}
body{
background:#F4F1EB;
color:#1D1D1F;
min-height:100vh;
width:100vw;
overflow:hidden;
user-select:none;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.hidden{display:none!important}
.stage{
position:fixed;inset:0;
display:flex;align-items:center;justify-content:center;
background:#F4F1EB;
}
.wrap-o{width:100%;margin:0 auto}
.wrap-i{margin:0 auto;display:block;width:100%;padding-left:2.5rem;padding-right:2.5rem}
@media(max-width:799px){.wrap-i{max-width:30rem;padding-left:1.5rem;padding-right:1.5rem}}
.bar-row{display:flex;width:100%;justify-content:space-between;align-items:center}
.bar-actions{display:flex;align-items:center}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none}
.nav{pointer-events:none;position:fixed;top:0;left:0;z-index:40;height:100vh;width:100%}
.nav.is-open{pointer-events:auto;height:100%}
.nav-bar{position:fixed;top:0;left:0;width:100%;padding-top:1.5rem;padding-bottom:1.5rem}
.nav-bar-open{z-index:40}
.nav.is-open .nav-bar-static{pointer-events:none!important}
.nav.is-open .nav-bar-static *{pointer-events:none!important}
.nav.is-open .nav-bar-open, .nav.is-open .nav-bar-open *{pointer-events:auto!important}
@media(max-width:799px){
.nav-bar{padding-top:1.125rem;padding-bottom:1.125rem;background:rgba(244,241,235,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(29,29,31,.12)}
.nav.is-open .nav-bar{background:#FAF7EF;border-bottom:1px solid rgba(29,29,31,.15)}
}
.nav-logo{pointer-events:auto;position:relative;color:#0E7C6B}
.nav-bar-open .nav-logo{color:#2E5BFF}
.logo{
display:flex;font-family:antique-olive,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-size:2.25rem;font-weight:700;text-transform:lowercase;letter-spacing:-.05em;
margin-top:-.5rem;line-height:1;color:inherit;
}
@media(max-width:799px){.logo{font-size:1.6875rem}}
.logo span{display:block;transform-origin:center;will-change:transform}
.logo-owl{position:absolute;top:-.25rem;left:50%;transform:translateX(-50%);pointer-events:none;opacity:0}
.logo-owl svg{width:4.25rem;height:3rem}
.nav-logo:hover .logo-owl{opacity:1}
.button{position:relative;display:inline-flex;align-items:center;border-radius:9999px}
.button-inner,.button-inner-hover,.button-inner-static{pointer-events:none;display:block}
.button-inner{position:relative;overflow:hidden}
.button-inner-hover{position:absolute;top:0;left:0;opacity:0;transform:translateY(70%);white-space:nowrap}
.button-inner-static{display:block;white-space:nowrap}
.button-bg{overflow:hidden;border-radius:9999px;position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(1);transition:transform 1.8s cubic-bezier(.19,1,.22,1)}
.button-bg,.button-bg-layer,.button-bg-layers{display:block}
.button-bg-layers{position:absolute;left:50%;transform:translateX(-50%);top:-60%;aspect-ratio:1/1;width:max(200%,10rem)}
.button-bg-layer{border-radius:9999px;position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(0)}
.button-bg-layer.-purple{background:#2E5BFF}
.button-bg-layer.-turquoise{background:#14B8A6}
.button-bg-layer.-yellow{background:#FFD074}
.button-bg-layer-1{background:#2E5BFF}
.button-bg-layer-2{background:#14B8A6}
.button-bg-layer-3{background:#2E5BFF}
@media(hover:hover) and (pointer:fine){
.button:hover .button-inner-static{opacity:0;transform:translateY(-70%);transition:transform 1.4s cubic-bezier(.19,1,.22,1),opacity .3s linear}
.button:hover .button-inner-hover{opacity:1;transform:translateY(0);transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
}
.nav-menu-toggle{pointer-events:auto;position:relative;cursor:pointer;z-index:2}
.nav-menu-toggle-close{pointer-events:auto!important;cursor:pointer;position:relative;z-index:5}
.nav-menu-toggle .button-bg{border:none!important}
.button-round{border:none}
.nav-bar-static .button-round .button-bg{border:max(1px,.0625rem) solid #2E5BFF}
.nav-button-icon{
position:relative;z-index:50;display:flex;align-items:center;justify-content:center;
height:3.5rem;width:3.5rem;border-radius:9999px;background:#2E5BFF;color:#FAFAF6;
overflow:hidden;
}
@media(max-width:799px){.nav-button-icon{height:2.5rem;width:2.5rem}}
.nav-button-icon .button-inner{z-index:2}
.nav-button-icon-svg{width:1rem;height:.75rem;overflow:visible}
@media(max-width:799px){.nav-button-icon-svg{width:.75rem;height:.5rem}}
.nav-button-icon-path{transition:transform .5s cubic-bezier(.19,1,.22,1)}
@media(hover:hover) and (pointer:fine){
.nav-menu-toggle:hover .button-bg-layer{transition:transform 1.3s cubic-bezier(.19,1,.22,1),opacity .3s linear}
.nav-menu-toggle:hover .button-bg-layer-1{transform:scale(1)}
.nav-menu-toggle:hover .button-bg-layer-2{transform:scale(1);transition-delay:.1s}
.nav-menu-toggle:hover .button-bg-layer-3{transform:scale(1);transition-delay:.2s}
}
.nav.is-open .nav-bar-static{pointer-events:none}
.nav-menu-bg{position:absolute;top:0;left:0;color:#FAFAF6}
.nav-menu-bg path{transform-box:fill-box;transform-origin:center}
.nav-menu{
position:absolute;top:0;left:0;z-index:20;height:100%;width:100%;
background:#FAF7EF;color:#262629;
clip-path:url(#nav-menu-bg-mask);
display:flex;overflow:hidden;
box-shadow:0 -30px 80px rgba(29,29,31,.18);
}
.nav.is-open .nav-menu{overflow-y:auto}
.nav-menu-flex{display:flex;height:100%;width:100%;align-items:flex-end;padding-top:2.5rem;padding-bottom:2.5rem;min-height:43rem;position:relative}
@media(max-width:799px){.nav-menu-flex{min-height:44rem}}
.nav-bar-open{pointer-events:none}
.nav.is-open .nav-bar-open{pointer-events:auto;opacity:1;visibility:visible}
.nav-bar-open .nav-button-icon{background:transparent;color:#1D1D1F;overflow:visible}
.nav-menu-toggle-close{background-color:transparent;width:3.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center;border-radius:9999px}
@media(max-width:799px){.nav-menu-toggle-close{width:2.5rem;height:2.5rem}}
.nav-menu-toggle-close .nav-button-icon{color:#1D1D1F}
.nav-menu-toggle-close.button-round{background-color:transparent}
.nav-menu-toggle-close .button-circles{
position:absolute;inset:0;width:100%;height:100%;
transform-box:fill-box;transform-origin:center;transform:rotate(.1deg);
pointer-events:none;
}
.nav-menu-toggle-close .button-circle{fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.nav-menu-toggle-close .button-circle.-layer-1{stroke:#2E5BFF;stroke-dashoffset:0}
.nav-menu-toggle-close .button-circle.-layer-2{stroke:#14B8A6}
.nav-menu-toggle-close .button-circle.-layer-3{stroke:#FFD074}
.close-icon{overflow:visible}
.nav-button-icon svg{height:.75rem;width:1rem;overflow:visible}
@media(max-width:799px){.nav-button-icon svg{height:.5rem;width:.75rem}}
.close-icon-path-1,.close-icon-path-2{transform-box:fill-box;transform-origin:center}
.close-icon-path-1-hover{opacity:0;transform:translate(.75rem,-.75rem);transform-box:fill-box;transform-origin:center}
.close-icon-path-2-hover{opacity:0;transform:translate(-.75rem,-.75rem);transform-box:fill-box;transform-origin:center}
@media(hover:hover) and (pointer:fine){
.nav-menu-toggle-close:hover .button-circles{transform:rotate(90deg);transition:transform 1.4s cubic-bezier(.4,0,0,1)}
.nav-menu-toggle-close:hover .button-circle{transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,0,1);stroke-dashoffset:0}
.nav-menu-toggle-close:hover .button-circle.-layer-2{transition-duration:1.4s}
.nav-menu-toggle-close:hover .button-circle.-layer-3{transition-delay:.15s;transition-duration:1.25s}
.nav-menu-toggle-close:hover .close-icon-path-1,.nav-menu-toggle-close:hover .close-icon-path-2,.nav-menu-toggle-close:hover .close-icon-path-1-hover,.nav-menu-toggle-close:hover .close-icon-path-2-hover{transition:transform .8s cubic-bezier(.19,1,.22,1),opacity .3s linear}
.nav-menu-toggle-close:hover .close-icon-path-1{opacity:0;transform:translate(-.75rem,.75rem)}
.nav-menu-toggle-close:hover .close-icon-path-2{opacity:0;transform:translate(.75rem,.75rem);transition-delay:.1s}
.nav-menu-toggle-close:hover .close-icon-path-1-hover{opacity:1;transform:translate(0)}
.nav-menu-toggle-close:hover .close-icon-path-2-hover{opacity:1;transform:translate(0);transition-delay:.1s}
}
.nav-close-circle .button-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.nav-menu-content{position:relative;z-index:21;width:100%}
.menu-grid{display:flex;flex-direction:column-reverse;gap:2rem;height:100%}
@media(min-width:800px){
.menu-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2rem}
.menu-left{grid-column:span 6/span 6;display:flex;align-items:flex-end}
.menu-right{grid-column:span 6/span 6;grid-column-start:7;display:flex;align-items:flex-end;justify-content:flex-start}
}
.nav-menu-info{margin-bottom:-.4rem}
@media(min-width:800px){.nav-menu-info{margin-top:2rem}}
.label{font-family:Matter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:#2E5BFF}
@media(max-width:799px){.label{line-height:2;font-size:.5rem}}
.nav-menu-info-label{margin-bottom:1.125rem}
@media(max-width:799px){.nav-menu-info-label{margin-top:1.5rem}}
.nav-menu-info-contact,.nav-menu-info-address{font-size:2.5rem;font-style:normal;line-height:1.2;letter-spacing:-.06em;color:#1D1D1F}
@media(max-width:799px){.nav-menu-info-contact,.nav-menu-info-address{font-size:1.5rem}}
.nav-menu-info-contact{margin-bottom:1.5rem}
@media(max-width:799px){.nav-menu-info-contact{margin-bottom:1rem}}
.nav-menu-info a{display:inline;letter-spacing:-.05em;overflow-wrap:anywhere}
@media(max-width:799px){.nav-menu-info-contact a[href^="mailto:"]{font-size:1.15rem}}
.nav-menu-info-line{will-change:transform,opacity;overflow:hidden}
.nav-menu-info-line > *{will-change:transform,opacity}
.nav-ul{
font-family:antique-olive,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-weight:700;text-transform:lowercase;color:#1D1D1F;
font-size:6.25rem;letter-spacing:-.05em;line-height:1;text-align:left;
}
@media(max-width:799px){.nav-ul{font-size:3.3125rem;text-align:left}}
.nav-li{position:relative;line-height:.76471}
.nav-li + .nav-li{margin-top:1rem}
.nav-a{position:relative;display:inline-block;transition:color .4s linear}
@media(hover:hover) and (pointer:fine){.nav-a > *{pointer-events:none}}
.nav-a-letters{display:flex}
.nav-a-letter{display:block;will-change:transform,opacity}
.nav-a-letters .nav-a-letter:nth-child(even){opacity:0}
.nav-a-letters-top{position:absolute;top:0;left:0;display:flex}
.nav-a-letters-top .nav-a-letter:nth-child(odd){opacity:0!important}
.nav-a-stripe{
position:absolute;left:0;top:.365em;height:.115em;width:calc(100% + .075em);
background:#6C8CFF;transform:scaleX(0);transform-origin:right;
transition:transform .8s cubic-bezier(.4,0,0,1);
}
.nav-a-stripe--yellow{background:#FFD074;transition-delay:.1s}
.nav-a-stripe--turquoise{background:#14B8A6;transition-delay:.05s}
.nav-a-stripe--purple{background:#6C8CFF}
@media(hover:hover) and (pointer:fine){
.nav-a:hover .nav-a-stripe{transform-origin:left;transform:scaleX(1)}
.nav-a:hover .nav-a-stripe--yellow{transition-delay:0s}
.nav-a:hover .nav-a-stripe--turquoise{transition-delay:.05s}
.nav-a:hover .nav-a-stripe--purple{transition-delay:.1s}
}
.nav-a-count{
position:absolute;display:flex;align-items:center;justify-content:center;border-radius:9999px;
font-family:Matter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-size:.135em;font-weight:600;line-height:1;letter-spacing:-.06em;
right:-3em;top:.75em;height:2.15em;width:2.15em;color:#1D1D1F;will-change:transform,opacity;
}
@media(max-width:799px){.nav-a-count{font-size:.175em}}
@media(min-width:800px){.nav-a-count-inner{margin-top:.2rem}}
.bg-turquoise-light{background:#14B8A6}
.bg-yellow-light{background:#FFD074}
.nav-a-letters,.nav-a-letters-top{overflow:visible}
.nav-li{overflow:visible}
````
## Source — script.js
````javascript
(function () {
const nav = document.getElementById('nav');
const menu = document.getElementById('menu');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');
const curvePath = document.getElementById('nav-menu-bg-svg-curve');
const bgSvg = document.querySelector('.nav-menu-bg-svg');
const menuContent = document.querySelector('.nav-menu-content');
let isOpen = false;
let progress = 0;
let W = window.innerWidth, H = window.innerHeight;
let bgTween = null;
let contentTweens = [];
let done = Promise.resolve();
let resolveDone = null;
function cubicBezier(p1x, p1y, p2x, p2y) {
const cx = 3 * p1x, bx = 3 * (p2x - p1x) - cx, ax = 1 - cx - bx;
const cy = 3 * p1y, by = 3 * (p2y - p1y) - cy, ay = 1 - cy - by;
function sampleX(t) { return ((ax * t + bx) * t + cx) * t; }
function sampleY(t) { return ((ay * t + by) * t + cy) * t; }
function solveX(x) {
let t = x;
for (let i = 0; i < 5; i++) {
const x2 = sampleX(t) - x;
if (Math.abs(x2) < 1e-4) return t;
const d = (3 * ax * t + 2 * bx) * t + cx;
if (Math.abs(d) < 1e-6) break;
t -= x2 / d;
}
return t;
}
return (x) => sampleY(solveX(x));
}
const bgEase = cubicBezier(0.4, 0, 0, 1);
function killContent() {
contentTweens.forEach(t => t && t.kill && t.kill());
contentTweens = [];
if (bgTween) { bgTween.kill(); bgTween = null; }
}
function onResize() {
const r = menu.getBoundingClientRect();
W = Math.max(1, Math.round(r.width || window.innerWidth));
H = Math.max(1, Math.round(r.height || window.innerHeight));
bgSvg.setAttribute('viewBox', `0 0 ${W} ${H}`);
setCurve();
}
function setCurve() {
if (!W || !H || isNaN(W)) return;
const a = progress < 0.5 ? progress : 1 - progress;
const o = isOpen ? H * progress : H - H * progress;
const u = o + 300 * (isOpen ? 1.5 : -1.5) * a;
if (isOpen) {
curvePath.setAttribute('d', `M ${W} ${o} Q ${W / 2} ${u} 0 ${o} L 0 0 L ${W} 0 L ${W} ${o} Z`);
} else {
curvePath.setAttribute('d', `M ${W} ${o} Q ${W / 2} ${u} 0 ${o} L 0 ${H} L ${W} ${H} L ${W} ${o} Z`);
}
}
const lis = Array.from(document.querySelectorAll('.nav-li'));
const infoLines = Array.from(document.querySelectorAll('.nav-menu-info-line'));
const counts = Array.from(document.querySelectorAll('.nav-a-count'));
function lettersOf(li) {
const base = Array.from(li.querySelectorAll('.nav-a-letters .nav-a-letter'));
const top = Array.from(li.querySelectorAll('.nav-a-letters-top .nav-a-letter'));
const out = [];
for (let i = 0; i < base.length; i++) out.push(i % 2 === 0 ? base[i] : top[i]);
return out;
}
document.querySelectorAll('.nav-a-letters .nav-a-letter:nth-child(even)').forEach(el => { el.style.opacity = '0'; });
document.querySelectorAll('.nav-a-letters-top .nav-a-letter:nth-child(odd)').forEach(el => { el.style.opacity = '0'; });
lis.forEach((li, row) => gsap.set(lettersOf(li), { x: 150 * (row + 1), opacity: 0 }));
infoLines.forEach((el, i) => gsap.set(el, { y: 20 * (i + 1), opacity: 0 }));
gsap.set(counts, { scale: 0, opacity: 0, transformOrigin: '50% 50%' });
onResize();
window.addEventListener('resize', onResize);
function animateBg(opening) {
if (bgTween) bgTween.kill();
const state = { p: progress };
bgTween = gsap.to(state, {
p: opening ? 1 : 0,
duration: opening ? 1.0 : 0.5,
ease: bgEase,
onUpdate: () => { progress = state.p; setCurve(); },
onComplete: () => {
progress = opening ? 1 : 0;
setCurve();
gsap.set(menuContent, { opacity: 1 });
bgTween = null;
if (resolveDone) { resolveDone(); resolveDone = null; done = Promise.resolve(); }
}
});
}
function animateLetters() {
lis.forEach((li, row) => {
const t = gsap.fromTo(lettersOf(li),
{ x: 150 * (row + 1), opacity: 0 },
{ x: 0, opacity: 1, duration: 1.1, ease: 'elastic.out(0.75,0.55)', delay: 0.2 + row * 0.05, stagger: 0.02, overwrite: 'auto' });
contentTweens.push(t);
});
}
function animateInfo() {
infoLines.forEach((el, i) => {
contentTweens.push(gsap.fromTo(el,
{ y: 20 * (i + 1), opacity: 0 },
{ y: 0, opacity: 1, duration: 1.4, ease: 'expo.out', delay: 0.5 + i * 0.005, overwrite: 'auto' }));
});
}
function animateCounts() {
contentTweens.push(gsap.fromTo(counts,
{ scale: 0, opacity: 0 },
{ scale: 1, opacity: 1, duration: 1.0, ease: 'elastic.out(0.75,0.5)', delay: 0.5, stagger: 0.1, transformOrigin: '50% 50%', overwrite: 'auto' }));
}
function openMenu() {
if (isOpen) return;
killContent();
gsap.set(menuContent, { opacity: 1 });
isOpen = true;
nav.classList.add('is-open');
document.documentElement.classList.add('nav-is-open');
menu.setAttribute('aria-hidden', 'false');
onResize(); setCurve();
animateBg(true);
animateLetters(); animateInfo(); animateCounts();
}
function closeMenu() {
if (!isOpen) return;
killContent();
isOpen = false;
nav.classList.remove('is-open');
document.documentElement.classList.remove('nav-is-open');
menu.setAttribute('aria-hidden', 'true');
setCurve();
contentTweens.push(gsap.to(menuContent, { opacity: 0, duration: 0.3, ease: 'none', overwrite: 'auto' }));
animateBg(false);
}
async function onToggle() {
await done;
done = new Promise((r) => { resolveDone = r; });
if (isOpen) closeMenu();
else openMenu();
setTimeout(() => { if (resolveDone) { resolveDone(); resolveDone = null; done = Promise.resolve(); } }, 1600);
}
openBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); onToggle(); });
closeBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); onToggle(); });
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && isOpen) onToggle();
});
document.querySelectorAll('.nav-a, .nav-menu-info a').forEach(a => {
a.addEventListener('click', (e) => { if (a.getAttribute('href') === '#') e.preventDefault(); });
});
document.querySelectorAll('.nav-logo').forEach(logo => {
const spans = logo.querySelectorAll('.logo span');
const owl = logo.querySelector('.logo-owl');
logo.addEventListener('mouseenter', () => {
gsap.to(spans, { y: -6, duration: 0.35, ease: 'power3.out', stagger: 0.035, overwrite: 'auto' });
if (owl) gsap.to(owl, { opacity: 1, y: 3, duration: 0.4, ease: 'power3.out', overwrite: 'auto' });
});
logo.addEventListener('mouseleave', () => {
gsap.to(spans, { y: 0, duration: 0.6, ease: 'elastic.out(1,.5)', stagger: 0.025, overwrite: 'auto' });
if (owl) gsap.to(owl, { opacity: 0, y: 0, duration: 0.35, ease: 'power3.in', overwrite: 'auto' });
});
});
progress = 0; isOpen = false; setCurve();
})();
````