# Full Screen Slide Menu > A full-screen menu that slides in as the page exits with rotate and scale — dramatic site navigation for bold brand sites. **Definition:** Full Screen Slide 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-08-03 - Canonical page: https://html.bosconvertpro.com/collection/full-screen-slide-menu - Full-page preview: https://html.bosconvertpro.com/collection/full-screen-slide-menu/full - Live demo: https://html.bosconvertpro.com/demos/full-screen-slide-menu/index.html - Markdown mirror: https://html.bosconvertpro.com/collection/full-screen-slide-menu/index.md - License: https://html.bosconvertpro.com/terms ## How to use 1. Open https://html.bosconvertpro.com/collection/full-screen-slide-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/full-screen-slide-menu. 3. Paste the files into your project and adjust timing, easing, and content as needed. ## FAQ ### What is Full Screen Slide Menu? Full Screen Slide Menu is a navigation UI animation from collections.html. A full-screen menu that slides in as the page exits with rotate and scale — dramatic site navigation for bold brand sites. ### What is Full Screen Slide Menu built with? Full Screen Slide 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 Full Screen Slide Menu in my project? Open the animation page (https://html.bosconvertpro.com/collection/full-screen-slide-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/full-screen-slide-menu/index.html. ### Is Full Screen Slide Menu free to use? Yes. The Full Screen Slide 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 Fullscreen Slide Menu — AETHER

Precision apparel

Form follows
force.

Technical layers engineered for athletes who train in silence and compete with presence. Built light. Built to last.

Shop collection Watch film
  • 12k+ Athletes
  • 40 Countries
  • 100% Recycled yarns
```` ## Source — styles.css ````css /* ========================================================================== Fullscreen Slide Menu Page rotates / scales away; dark menu slides in from the top-left. ========================================================================== */ :root { --slide-menu-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --slide-menu-display: "Syne", var(--slide-menu-font); /* Surfaces */ --slide-menu-void: #050506; --slide-menu-surface: #0b0b0d; --slide-menu-elevated: #121214; --slide-menu-background: #050506; --slide-menu-border: rgba(255, 255, 255, 0.08); --slide-menu-border-strong: rgba(255, 255, 255, 0.14); /* Type */ --slide-menu-text: #f4f4f5; --slide-menu-text-soft: rgba(244, 244, 245, 0.72); --slide-menu-text-muted: rgba(244, 244, 245, 0.48); --slide-menu-text-faint: rgba(244, 244, 245, 0.38); --slide-menu-white: #ffffff; /* Accent */ --slide-menu-accent: #c8f542; --slide-menu-accent-text: #0a0a0b; /* Spacing */ --slide-menu-header-padding: clamp(1.25rem, 3vw, 2rem); --slide-menu-nav-padding-x: clamp(1.5rem, 4vw, 4rem); --slide-menu-section-padding: clamp(1.5rem, 4vw, 4rem); --slide-menu-radius: 14px; --slide-menu-radius-pill: 999px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; font-family: var(--slide-menu-font); color: var(--slide-menu-text); background: var(--slide-menu-void); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } img { display: block; max-width: 100%; } ul { list-style: none; } /* -------------------------------------------------------------------------- Root -------------------------------------------------------------------------- */ .slide-menu { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background-color: var(--slide-menu-background); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .slide-menu__header { position: absolute; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: var(--slide-menu-header-padding); pointer-events: none; } .slide-menu__header > * { pointer-events: auto; } .slide-menu__logo { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--slide-menu-text); will-change: color; } .slide-menu__logo-mark { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--slide-menu-accent); box-shadow: 0 0 0 4px rgba(200, 245, 66, 0.12); } .slide-menu__logo-text { font-family: var(--slide-menu-display); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } /* -------------------------------------------------------------------------- Toggle button -------------------------------------------------------------------------- */ .slide-menu__toggle { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0; border: 0; background: none; } .slide-menu__toggle-label-mask { position: relative; display: block; width: 3.5em; height: 1em; font-size: 0.95rem; line-height: 1; overflow: hidden; } .slide-menu__toggle-label-track { display: flex; flex-direction: column; gap: 2px; will-change: transform; } .slide-menu__toggle-label { display: block; height: 1em; font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; user-select: none; pointer-events: none; color: var(--slide-menu-white); } .slide-menu__toggle-icon { position: relative; display: flex; width: 1.35rem; height: 1rem; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .slide-menu__toggle-line { position: absolute; display: block; width: 100%; height: 1.5px; border-radius: 2px; background-color: var(--slide-menu-text); transform-origin: center; will-change: transform, background-color; } /* -------------------------------------------------------------------------- Menu overlay -------------------------------------------------------------------------- */ .slide-menu__overlay { position: absolute; inset: 0; z-index: 10; background-color: var(--slide-menu-background); pointer-events: none; will-change: transform; } .slide-menu__overlay-inner { position: absolute; inset: 0; margin: 0 auto; max-width: 1280px; display: flex; align-items: stretch; will-change: opacity; } /* -------------------------------------------------------------------------- Primary navigation column -------------------------------------------------------------------------- */ .slide-menu__nav-column { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--slide-menu-nav-padding-x) 4rem; } .slide-menu__nav-label { margin: 0 0 1.25rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slide-menu-text-faint); } .slide-menu__nav { display: flex; flex-direction: column; margin-bottom: 3rem; } .slide-menu__nav-item { overflow: hidden; } .slide-menu__nav-link { position: relative; display: block; padding: 0.08em 0; font-family: var(--slide-menu-display); font-size: clamp(2.25rem, 5vw, 4.75rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--slide-menu-white); will-change: transform; } .slide-menu__nav-link-indicator { position: absolute; left: 0; top: 50%; width: 0.18em; height: 0.18em; border-radius: 50%; background-color: var(--slide-menu-accent); pointer-events: none; transform-origin: center center; will-change: transform; } .slide-menu__nav-link-text { display: inline-block; will-change: transform; } .slide-menu__nav-explore { display: inline-block; margin-top: 1.75rem; font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; color: var(--slide-menu-text-muted); transition: color 0.25s ease; will-change: opacity; } .slide-menu__nav-explore:hover { color: var(--slide-menu-accent); } .slide-menu__footer-nav { position: absolute; bottom: 3rem; left: var(--slide-menu-nav-padding-x); display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; } .slide-menu__footer-link { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--slide-menu-text-muted); transition: color 0.25s ease; will-change: opacity; } .slide-menu__footer-link:hover { color: var(--slide-menu-white); } /* -------------------------------------------------------------------------- Category preview images -------------------------------------------------------------------------- */ .slide-menu__preview { position: relative; width: 42%; display: flex; align-items: center; justify-content: center; padding: 4rem var(--slide-menu-nav-padding-x) 4rem 0; box-sizing: border-box; } .slide-menu__preview-frame { position: relative; width: 100%; max-width: 420px; } .slide-menu__preview-track { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: calc(var(--slide-menu-radius) + 4px); border: 1px solid var(--slide-menu-border); background: var(--slide-menu-elevated); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.03); } .slide-menu__preview-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: clip-path, transform; filter: saturate(0.92) contrast(1.05); } .slide-menu__preview-caption { display: flex; align-items: center; justify-content: space-between; margin-top: 0.9rem; padding: 0 0.15rem; } .slide-menu__preview-caption-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slide-menu-text-faint); } .slide-menu__preview-caption-hint { font-size: 0.75rem; color: var(--slide-menu-text-muted); } /* -------------------------------------------------------------------------- Page layer + hero -------------------------------------------------------------------------- */ .slide-menu__page { position: absolute; inset: 0; z-index: 20; overflow: hidden; background-color: var(--slide-menu-surface); will-change: transform; color: var(--slide-menu-text); } .slide-menu__hero { position: relative; display: flex; align-items: stretch; width: 100%; min-height: 100vh; min-height: 100dvh; padding: 0; background: var(--slide-menu-surface); box-sizing: border-box; } .slide-menu__hero-background { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .slide-menu__hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transform: scale(1.04); filter: brightness(0.55) contrast(1.08) saturate(0.9); } .slide-menu__hero-overlay { position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(5, 5, 6, 0.92) 0%, rgba(5, 5, 6, 0.72) 38%, rgba(5, 5, 6, 0.35) 68%, rgba(5, 5, 6, 0.55) 100% ), linear-gradient( to top, rgba(5, 5, 6, 0.95) 0%, rgba(5, 5, 6, 0.45) 38%, rgba(5, 5, 6, 0.15) 70%, rgba(5, 5, 6, 0.35) 100% ); } .slide-menu__hero-grain { position: absolute; inset: 0; opacity: 0.18; pointer-events: none; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } .slide-menu__hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 100vh; min-height: 100dvh; padding: calc(var(--slide-menu-header-padding) + 3.5rem) var(--slide-menu-section-padding) var(--slide-menu-section-padding); gap: 2.5rem; } .slide-menu__hero-copy { max-width: 38rem; } .slide-menu__hero-eyebrow { margin: 0 0 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slide-menu-accent); } .slide-menu__hero-title { margin: 0 0 1.35rem; font-family: var(--slide-menu-display); font-size: clamp(3rem, 7.5vw, 5.75rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; color: var(--slide-menu-text); } .slide-menu__hero-title em { font-style: normal; color: transparent; background: linear-gradient( 120deg, #f7f7f8 0%, #c8f542 45%, #e8ff9a 70%, #f7f7f8 100% ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; } .slide-menu__hero-description { margin: 0 0 1.75rem; max-width: 32rem; font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 400; line-height: 1.65; color: var(--slide-menu-text-soft); } .slide-menu__hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; } .slide-menu__button { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; min-height: 3rem; padding: 0.8rem 1.35rem; border-radius: var(--slide-menu-radius-pill); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .slide-menu__button--primary { color: var(--slide-menu-accent-text); background: var(--slide-menu-accent); box-shadow: 0 10px 30px rgba(200, 245, 66, 0.18); } .slide-menu__button--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(200, 245, 66, 0.28); } .slide-menu__button--secondary { color: var(--slide-menu-text); border: 1px solid var(--slide-menu-border-strong); background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .slide-menu__button--secondary:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.06); } .slide-menu__button-play-icon { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid var(--slide-menu-border-strong); background: linear-gradient( 135deg, transparent 42%, var(--slide-menu-text) 42% 58%, transparent 58% ) center / 0.55rem 0.55rem no-repeat; background-position: 55% 50%; } .slide-menu__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 36rem; border: 1px solid var(--slide-menu-border); border-radius: var(--slide-menu-radius); overflow: hidden; background: var(--slide-menu-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .slide-menu__stat { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.15rem; background: rgba(10, 10, 12, 0.55); } .slide-menu__stat-value { font-family: var(--slide-menu-display); font-size: clamp(1.25rem, 2.5vw, 1.55rem); font-weight: 700; letter-spacing: -0.03em; color: var(--slide-menu-text); } .slide-menu__stat-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slide-menu-text-muted); } /* -------------------------------------------------------------------------- Reduced motion + responsive -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .slide-menu__page, .slide-menu__nav-link, .slide-menu__preview-image, .slide-menu__preview, .slide-menu__nav-explore, .slide-menu__footer-link, .slide-menu__button { transition: none; animation: none; } } @media (max-width: 900px) { .slide-menu__preview { width: 38%; padding-right: 1.5rem; } } @media (max-width: 767px) { .slide-menu__preview { display: none; } .slide-menu__nav-column { padding: 5rem var(--slide-menu-nav-padding-x); } .slide-menu__footer-nav { bottom: 2.5rem; } .slide-menu__hero-copy { max-width: none; } .slide-menu__hero-inner { padding-top: calc(var(--slide-menu-header-padding) + 4rem); gap: 2rem; } .slide-menu__stats { max-width: none; } .slide-menu__stat { padding: 0.85rem 0.75rem; } } @media (max-width: 480px) { .slide-menu__stats { grid-template-columns: 1fr; } .slide-menu__button { width: 100%; } .slide-menu__hero-actions { width: 100%; } } ```` ## Source — script.js ````javascript /** * Fullscreen Slide Menu * --------------------- * Open: page exits (y + rotate + scale + radius) while overlay settles in * from the top-left; label track swaps Menu → Close; burger morphs to X. * Hover: indicator scales in, link text slides right; matching preview image * reveals via clip-path inset + scale (index-aligned with nav links). * Close: single timeline reverse() — resumes from current progress. * * Root config: * data-slide-menu-duration * data-slide-menu-ease * data-slide-menu-background */ (function () { "use strict"; const PAGE_ROTATION_DEG = 7; const PAGE_SCALE = 1.3; const OVERLAY_START = { x: -60, yPercent: -25, rotation: -PAGE_ROTATION_DEG, scale: PAGE_SCALE, }; const HOVER_DURATION = 0.4; const HOVER_EASE = "back.out"; const IMAGE_REVEAL_DURATION = 0.7; const IMAGE_FADE_DURATION = 0.4; const LABEL_GAP_PX = 2; const ICON_OFFSET_PX = 3; const TEXT_CLOSED = "#f4f4f5"; const TEXT_OPEN = "#ffffff"; const DEFAULT_BACKGROUND = "#050506"; const SELECTORS = { root: "[data-slide-menu]", toggle: "[data-slide-menu-toggle]", overlay: "[data-slide-menu-overlay]", page: "[data-slide-menu-page]", content: "[data-slide-menu-content]", link: "[data-slide-menu-link]", previewImage: "[data-slide-menu-preview-image]", labelTrack: "[data-slide-menu-label-track]", labelOpen: "[data-slide-menu-label-open]", iconTop: "[data-slide-menu-icon-top]", iconBottom: "[data-slide-menu-icon-bottom]", logo: "[data-slide-menu-logo]", linkIndicator: ".slide-menu__nav-link-indicator", linkText: ".slide-menu__nav-link-text", }; function whenReady(callback, attempt) { attempt = attempt || 0; if (typeof gsap === "undefined") { if (attempt < 100) { setTimeout(function () { whenReady(callback, attempt + 1); }, 50); } else { console.error("[Slide Menu] GSAP failed to load"); } return; } callback(); } whenReady(function () { const instances = []; document.querySelectorAll(SELECTORS.root).forEach(function (root) { const api = createSlideMenu(root); if (api) instances.push(api); }); window.SlideMenu = { refresh: function () { instances.length = 0; document.querySelectorAll(SELECTORS.root).forEach(function (root) { const api = createSlideMenu(root); if (api) instances.push(api); }); }, open: function () { instances.forEach(function (api) { api.open(); }); }, close: function () { instances.forEach(function (api) { api.close(); }); }, }; }); /* ---------- one menu instance ---------- */ function createSlideMenu(root) { const toggle = root.querySelector(SELECTORS.toggle); const overlay = root.querySelector(SELECTORS.overlay); const page = root.querySelector(SELECTORS.page); const content = root.querySelector(SELECTORS.content); const links = gsap.utils.toArray(root.querySelectorAll(SELECTORS.link)); const previewImages = gsap.utils.toArray( root.querySelectorAll(SELECTORS.previewImage) ); const labelTrack = root.querySelector(SELECTORS.labelTrack); const labelOpen = root.querySelector(SELECTORS.labelOpen); const iconTop = root.querySelector(SELECTORS.iconTop); const iconBottom = root.querySelector(SELECTORS.iconBottom); const logo = root.querySelector(SELECTORS.logo); if (!toggle || !overlay || !page) return null; const duration = parseFloat(root.dataset.slideMenuDuration || "1.4"); const ease = root.dataset.slideMenuEase || "expo.inOut"; const background = root.dataset.slideMenuBackground || DEFAULT_BACKGROUND; const chromeDuration = duration * 0.7; const chromeStartOffset = duration * 0.2; overlay.style.backgroundColor = background; root.style.backgroundColor = background; root.style.setProperty("--slide-menu-background", background); let timeline = null; let isOpen = false; let activeImageIndex = 0; let resizeTimer = null; function getPageExitDistance() { const radians = (PAGE_ROTATION_DEG * Math.PI) / 180; const height = page.offsetHeight || window.innerHeight; const width = page.offsetWidth || window.innerWidth; /* Enough travel so the scaled + rotated page clears the viewport */ return ( height * 0.5 + ((width / 2) * PAGE_SCALE * Math.sin(radians) + (height / 2) * PAGE_SCALE * Math.cos(radians)) + 20 ); } function getLabelTrackShift() { const labelHeight = labelOpen ? labelOpen.offsetHeight : 14; return -(labelHeight + LABEL_GAP_PX); } function resetNavLinks() { links.forEach(function (link) { const indicator = link.querySelector(SELECTORS.linkIndicator); const text = link.querySelector(SELECTORS.linkText); if (indicator) gsap.set(indicator, { yPercent: -50, scale: 0 }); if (text) gsap.set(text, { x: 0 }); link.classList.remove("is-active"); }); } function resetPreviewImages(activeIndex) { previewImages.forEach(function (image, index) { const isActive = index === activeIndex; image.classList.toggle("is-active", isActive); gsap.set(image, { clipPath: isActive ? "inset(0%)" : "inset(50% 0%)", scale: isActive ? 1 : 1.1, opacity: 1, zIndex: isActive ? 2 : 1, }); }); activeImageIndex = activeIndex; } function buildTimeline() { const pageExitY = getPageExitDistance(); const labelShiftY = getLabelTrackShift(); resetNavLinks(); gsap.set(overlay, { pointerEvents: "none", x: OVERLAY_START.x, yPercent: OVERLAY_START.yPercent, rotation: OVERLAY_START.rotation, scale: OVERLAY_START.scale, transformOrigin: "50% 50%", }); if (content) gsap.set(content, { opacity: 0.2 }); if (labelTrack) gsap.set(labelTrack, { y: 0 }); if (iconTop) gsap.set(iconTop, { y: -ICON_OFFSET_PX, rotation: 0 }); if (iconBottom) gsap.set(iconBottom, { y: ICON_OFFSET_PX, rotation: 0 }); if (logo) gsap.set(logo, { color: TEXT_CLOSED }); if (iconTop) gsap.set(iconTop, { backgroundColor: TEXT_CLOSED }); if (iconBottom) gsap.set(iconBottom, { backgroundColor: TEXT_CLOSED }); if (timeline) timeline.kill(); timeline = gsap.timeline({ paused: true, onStart: function () { overlay.style.pointerEvents = "auto"; overlay.removeAttribute("inert"); overlay.setAttribute("aria-hidden", "false"); document.body.setAttribute("data-slide-menu-open", "true"); }, onReverseComplete: function () { overlay.style.pointerEvents = "none"; overlay.setAttribute("inert", ""); overlay.setAttribute("aria-hidden", "true"); document.body.removeAttribute("data-slide-menu-open"); }, }); /* Page exits; overlay settles to cover the viewport */ timeline.to( page, { y: pageExitY, rotation: PAGE_ROTATION_DEG, scale: PAGE_SCALE, borderRadius: "16px", duration: duration, ease: ease, force3D: true, }, 0 ); timeline.to( overlay, { x: 0, yPercent: 0, rotation: 0, scale: 1, duration: duration, ease: ease, force3D: true, }, 0 ); if (content) { timeline.to( content, { opacity: 1, duration: duration, ease: ease, }, 0 ); } /* Header chrome lags slightly behind the main transform */ if (labelTrack) { timeline.to( labelTrack, { y: labelShiftY, duration: chromeDuration, ease: ease, force3D: true, }, chromeStartOffset ); } if (logo) { timeline.to( logo, { color: TEXT_OPEN, duration: chromeDuration, ease: ease, }, chromeStartOffset ); } if (iconTop) { timeline.to( iconTop, { backgroundColor: TEXT_OPEN, duration: chromeDuration, ease: ease, }, chromeStartOffset ); timeline.to( iconTop, { y: 0, rotation: 45, duration: chromeDuration, ease: ease, force3D: true, }, chromeStartOffset ); } if (iconBottom) { timeline.to( iconBottom, { backgroundColor: TEXT_OPEN, duration: chromeDuration, ease: ease, }, chromeStartOffset ); timeline.to( iconBottom, { y: 0, rotation: -45, duration: chromeDuration, ease: ease, force3D: true, }, chromeStartOffset ); } } function revealPreviewImage(index) { if (index === activeImageIndex || !previewImages[index]) return; const previousImage = previewImages[activeImageIndex]; const nextImage = previewImages[index]; if (previousImage) { gsap.set(previousImage, { zIndex: 1 }); gsap.to(previousImage, { opacity: 0.5, duration: IMAGE_FADE_DURATION, ease: "expo.out", overwrite: "auto", }); previousImage.classList.remove("is-active"); } gsap.set(nextImage, { zIndex: 2 }); gsap.fromTo( nextImage, { clipPath: "inset(50% 0%)", scale: 1.1, opacity: 1, }, { clipPath: "inset(0%)", scale: 1, opacity: 1, duration: IMAGE_REVEAL_DURATION, ease: "expo.out", force3D: true, overwrite: "auto", } ); nextImage.classList.add("is-active"); activeImageIndex = index; } function openMenu() { if (isOpen) return; isOpen = true; resetPreviewImages(0); toggle.setAttribute("aria-expanded", "true"); toggle.setAttribute("aria-label", "Close navigation menu"); timeline.play(); window.setTimeout(function () { const firstLink = overlay.querySelector("a"); if (firstLink) firstLink.focus(); }, 100); } function closeMenu() { if (!isOpen) return; isOpen = false; resetNavLinks(); toggle.setAttribute("aria-expanded", "false"); toggle.setAttribute("aria-label", "Open navigation menu"); toggle.focus(); timeline.reverse(); } function toggleMenu() { if (isOpen) closeMenu(); else openMenu(); } /* ---------- nav link hover ---------- */ links.forEach(function (link, index) { const indicator = link.querySelector(SELECTORS.linkIndicator); const text = link.querySelector(SELECTORS.linkText); link.addEventListener("mouseenter", function () { links.forEach(function (otherLink) { otherLink.classList.remove("is-active"); }); link.classList.add("is-active"); revealPreviewImage(index); if (!indicator || !text) return; const textShiftX = indicator.offsetWidth + 16; gsap.to(indicator, { scale: 1, duration: HOVER_DURATION, ease: HOVER_EASE, force3D: true, overwrite: "auto", }); gsap.to(text, { x: textShiftX, duration: HOVER_DURATION, ease: HOVER_EASE, force3D: true, overwrite: "auto", }); }); link.addEventListener("mouseleave", function () { link.classList.remove("is-active"); if (!indicator || !text) return; gsap.to(indicator, { scale: 0, duration: HOVER_DURATION, ease: HOVER_EASE, force3D: true, overwrite: "auto", }); gsap.to(text, { x: 0, duration: HOVER_DURATION, ease: HOVER_EASE, force3D: true, overwrite: "auto", }); }); }); /* ---------- events ---------- */ toggle.addEventListener("click", toggleMenu); document.addEventListener("keydown", function (event) { if (event.key === "Escape" && isOpen) closeMenu(); }); window.addEventListener("resize", function () { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(function () { if (!isOpen) buildTimeline(); }, 150); }); if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { gsap.globalTimeline.timeScale(20); } buildTimeline(); return { open: openMenu, close: closeMenu, toggle: toggleMenu, }; } })(); ````