/** * Split Infinite Content Slider * ------------------------------------------------------------------ * Recreates the glitchandgrit.com home project showcase language: * - Viewport split down the middle (dual media per project) * - On change, LEFT & RIGHT halves travel opposite directions * - Exact accent colors from the live site * - GSAP + Observer for wheel / touch / pointer */ (() => { "use strict"; /* -------------------------------------------------------------------- Projects — Abbos portfolio copy Dual media (left ≠ right). All Unsplash URLs verified HTTP 200. -------------------------------------------------------------------- */ const img = (id) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=1800&q=80`; const PROJECTS = [ { id: "nova-studios", title: ["NOVA", "STUDIOS"], categories: ["Content & Marketing", "Web & Digital", "Brand & Identity"], cta: "COMING SOON", href: "#", accent: "#99f8ff", imageLeft: img("photo-1522071820081-009f0129c71c"), imageRight: img("photo-1600880292203-757bb62b4baf"), }, { id: "frame-and-field", title: ["FRAME", "AND FIELD"], categories: ["Film & Documentary"], cta: "VIEW FULL PROJECT", href: "#", accent: "#dcc7ff", imageLeft: img("photo-1452587925148-ce544e77e70d"), imageRight: img("photo-1478720568477-152d9b164e26"), }, { id: "atlas-talent", title: ["ATLAS", "TALENT"], categories: ["Content & Marketing", "Brand & Identity"], cta: "VIEW FULL PROJECT", href: "#", accent: "#6081d6", imageLeft: img("photo-1492691527719-9d1e07e534b4"), imageRight: img("photo-1534528741775-53994a69daeb"), }, { id: "horizon-lines", title: ["HORIZON", "LINES"], categories: ["Film & Documentary"], cta: "VIEW FULL PROJECT", href: "#", accent: "#fff8a5", imageLeft: img("photo-1506905925346-21bda4d32df4"), imageRight: img("photo-1469474968028-56623f02e42e"), }, { id: "pulse-motion", title: ["PULSE", "MOTION"], categories: ["Content & Marketing", "Brand & Identity"], cta: "VIEW FULL PROJECT", href: "#", accent: "#ffba6a", imageLeft: img("photo-1552674605-db6ffd4facb5"), imageRight: img("photo-1476480862126-209bfaa8edc8"), }, { id: "signal-system", title: ["SIGNAL", "SYSTEM"], categories: ["Web & Digital", "Content & Marketing", "Brand & Identity"], cta: "VIEW FULL PROJECT", href: "#", accent: "#9be187", imageLeft: img("photo-1558655146-d09347e92766"), imageRight: img("photo-1581291518633-83b4ebd1d83e"), }, { id: "arena-live", title: ["ARENA", "LIVE"], categories: ["Content & Marketing"], cta: "VIEW FULL PROJECT", href: "#", accent: "#f98dff", imageLeft: img("photo-1574629810360-7efbbe195018"), imageRight: img("photo-1519389950473-47ba0277781c"), }, { id: "form-house", title: ["FORM", "HOUSE"], categories: ["Content & Marketing", "Film & Documentary"], cta: "VIEW FULL PROJECT", href: "#", accent: "#f98dff", imageLeft: img("photo-1497366216548-37526070297c"), imageRight: img("photo-1618221195710-dd6b41faaea6"), }, ]; /* -------------------------------------------------------------------- Config — tuned for a premium, deliberate feel -------------------------------------------------------------------- */ const CONFIG = { duration: 1.2, // Custom ease: strong ease-in-out, soft landing (agency-site feel) ease: "power4.inOut", autoplay: true, autoplayDelay: 5.5, wheelTolerance: 12, dragThreshold: 0.12, // fraction of viewport reducedMotion: window.matchMedia("(prefers-reduced-motion: reduce)").matches, }; /* -------------------------------------------------------------------- DOM -------------------------------------------------------------------- */ const slider = document.querySelector("[data-slider]"); const trackLeft = document.querySelector('[data-track="left"]'); const trackRight = document.querySelector('[data-track="right"]'); const live = document.querySelector("[data-live]"); const loader = document.querySelector("[data-loader]"); const loaderBar = document.querySelector("[data-loader-bar]"); const brand = document.querySelector("[data-brand]"); const countEl = document.querySelector("[data-count]"); const countCurrent = document.querySelector("[data-count-current]"); const countTotal = document.querySelector("[data-count-total]"); if (!slider || !trackLeft || !trackRight) return; /* -------------------------------------------------------------------- State -------------------------------------------------------------------- */ let index = 0; let animating = false; let autoplayCall = null; let vh = window.innerHeight; let ready = false; const leftSlides = []; const rightSlides = []; /* -------------------------------------------------------------------- Helpers -------------------------------------------------------------------- */ const pad2 = (n) => String(n).padStart(2, "0"); function escapeHtml(str) { return String(str) .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """); } function loadImage(src) { return new Promise((resolve) => { const image = new Image(); image.decoding = "async"; image.onload = () => resolve({ src, ok: true }); image.onerror = () => resolve({ src, ok: false }); image.src = src; }); } /** Solid fallback if a remote image ever fails (gradient + noise feel) */ function fallbackDataUri(accent) { const svg = ``; return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`; } /* -------------------------------------------------------------------- Markup -------------------------------------------------------------------- */ function createSlide(project, side) { const el = document.createElement("article"); el.className = "slide"; el.dataset.id = project.id; el.dataset.side = side; el.style.setProperty("--accent", project.accent); const src = side === "left" ? project.imageLeft : project.imageRight; const alt = `${project.title.join(" ")} — ${side} visual`; const cats = project.categories .map((c) => `${escapeHtml(c)}`) .join(""); const lines = project.title .map((line) => `${escapeHtml(line)}`) .join(""); const coming = /coming/i.test(project.cta); const ctaHtml = coming ? escapeHtml(project.cta) : `${escapeHtml(project.cta)}`; el.innerHTML = `

${cats}

${lines}

`; const media = el.querySelector("img"); if (media) { media.addEventListener("error", function onImgError() { const fb = media.getAttribute("data-fallback"); if (fb && media.src !== fb) { media.src = fb; } media.removeEventListener("error", onImgError); }); } return el; } function build() { trackLeft.replaceChildren(); trackRight.replaceChildren(); leftSlides.length = 0; rightSlides.length = 0; PROJECTS.forEach((p) => { const L = createSlide(p, "left"); const R = createSlide(p, "right"); trackLeft.appendChild(L); trackRight.appendChild(R); leftSlides.push(L); rightSlides.push(R); }); if (countTotal) countTotal.textContent = pad2(PROJECTS.length); positionAll(true); setCount(); announce(); } /* -------------------------------------------------------------------- Positioning -------------------------------------------------------------------- */ function positionAll(immediate) { vh = window.innerHeight; leftSlides.forEach((el, i) => { const y = (i - index) * vh; if (immediate) gsap.set(el, { y, force3D: true }); else gsap.to(el, { y, duration: 0.01, force3D: true }); }); rightSlides.forEach((el, i) => { const y = (i - index) * vh; if (immediate) gsap.set(el, { y, force3D: true }); else gsap.to(el, { y, duration: 0.01, force3D: true }); }); } function setCount() { if (countCurrent) countCurrent.textContent = pad2(index + 1); } function announce() { const p = PROJECTS[index]; if (live) { live.textContent = `${p.title.join(" ")} — project ${index + 1} of ${PROJECTS.length}`; } } /* -------------------------------------------------------------------- Ken Burns — subtle continuous zoom on active media -------------------------------------------------------------------- */ function startKenBurns(i) { if (CONFIG.reducedMotion) return; const imgs = [ leftSlides[i]?.querySelector("img"), rightSlides[i]?.querySelector("img"), ].filter(Boolean); imgs.forEach((img, n) => { gsap.killTweensOf(img); gsap.fromTo( img, { scale: 1.06 }, { scale: 1.14, duration: 9, ease: "none", delay: n * 0.15, overwrite: true, } ); }); } /* -------------------------------------------------------------------- Core transition — opposite-direction split dir: 1 = next, -1 = prev -------------------------------------------------------------------- */ function goTo(nextIndex, dir) { if (!ready || animating) return; const total = PROJECTS.length; nextIndex = ((nextIndex % total) + total) % total; if (nextIndex === index) return; if (dir !== 1 && dir !== -1) { const fwd = (nextIndex - index + total) % total; const bwd = (index - nextIndex + total) % total; dir = fwd <= bwd ? 1 : -1; } // Reduced motion: hard cut if (CONFIG.reducedMotion) { index = nextIndex; positionAll(true); setCount(); announce(); startKenBurns(index); return; } animating = true; stopAutoplay(); const from = index; const to = nextIndex; const duration = CONFIG.duration; const ease = CONFIG.ease; /* dir = 1 (next): LEFT exits UP, enters from BOTTOM RIGHT exits DOWN, enters from TOP dir = -1: mirrored */ const leftExit = dir === 1 ? -vh : vh; const rightExit = dir === 1 ? vh : -vh; const leftEnter = dir === 1 ? vh : -vh; const rightEnter = dir === 1 ? -vh : vh; // Park idle slides out of view leftSlides.forEach((el, i) => { if (i !== from && i !== to) gsap.set(el, { y: vh * 3, force3D: true }); }); rightSlides.forEach((el, i) => { if (i !== from && i !== to) gsap.set(el, { y: vh * 3, force3D: true }); }); gsap.set(leftSlides[from], { y: 0 }); gsap.set(rightSlides[from], { y: 0 }); gsap.set(leftSlides[to], { y: leftEnter }); gsap.set(rightSlides[to], { y: rightEnter }); const contentIn = [ leftSlides[to].querySelector(".slide__content"), rightSlides[to].querySelector(".slide__content"), ]; const contentOut = [ leftSlides[from].querySelector(".slide__content"), rightSlides[from].querySelector(".slide__content"), ]; // Reset content transforms so recycled slides never stick mid-tween gsap.set(contentIn, { y: dir * 36, opacity: 0.35 }); gsap.set(contentOut, { y: 0, opacity: 1 }); const tl = gsap.timeline({ defaults: { duration, ease, force3D: true }, onComplete: () => { index = to; gsap.set([...contentIn, ...contentOut], { clearProps: "opacity,y" }); positionAll(true); animating = false; setCount(); announce(); startKenBurns(index); startAutoplay(); }, }); // Split peel — signature opposite-direction motion tl.to(leftSlides[from], { y: leftExit }, 0); tl.to(leftSlides[to], { y: 0 }, 0); tl.to(rightSlides[from], { y: rightExit }, 0); tl.to(rightSlides[to], { y: 0 }, 0); // Content settle — slight lag for depth tl.to( contentIn, { y: 0, opacity: 1, duration: duration * 0.85, ease: "power3.out" }, duration * 0.12 ); tl.to( contentOut, { opacity: 0.4, duration: duration * 0.45, ease: "power2.in" }, 0 ); // Media scale handoff const outImgs = [ leftSlides[from].querySelector("img"), rightSlides[from].querySelector("img"), ]; const inImgs = [ leftSlides[to].querySelector("img"), rightSlides[to].querySelector("img"), ]; gsap.killTweensOf([...outImgs, ...inImgs]); tl.to(outImgs, { scale: 1.04, duration, ease: "power2.inOut" }, 0); tl.fromTo( inImgs, { scale: 1.16 }, { scale: 1.06, duration, ease: "power2.out" }, 0 ); // Counter tick if (countCurrent) { tl.to( countCurrent, { y: dir * -8, opacity: 0, duration: 0.25, ease: "power2.in", onComplete: () => { countCurrent.textContent = pad2(to + 1); gsap.set(countCurrent, { y: dir * 8 }); }, }, 0 ); tl.to( countCurrent, { y: 0, opacity: 1, duration: 0.35, ease: "power2.out" }, 0.3 ); } } function next() { goTo(index + 1, 1); } function prev() { goTo(index - 1, -1); } /* -------------------------------------------------------------------- Autoplay -------------------------------------------------------------------- */ function startAutoplay() { stopAutoplay(); if (!CONFIG.autoplay || CONFIG.reducedMotion || !ready) return; autoplayCall = gsap.delayedCall(CONFIG.autoplayDelay, next); } function stopAutoplay() { if (autoplayCall) { autoplayCall.kill(); autoplayCall = null; } } /* -------------------------------------------------------------------- Input — GSAP Observer (wheel, touch, pointer) -------------------------------------------------------------------- */ function bindObserver() { // GSAP Observer — same pattern award sites use for section steppers if (typeof Observer !== "undefined") { Observer.create({ target: slider, type: "wheel,touch,pointer", wheelSpeed: -1, tolerance: CONFIG.wheelTolerance, preventDefault: true, onDown: () => { if (!animating && ready) prev(); }, onUp: () => { if (!animating && ready) next(); }, }); } else { slider.addEventListener( "wheel", (e) => { e.preventDefault(); if (animating || !ready) return; if (e.deltaY > 20) next(); else if (e.deltaY < -20) prev(); }, { passive: false } ); } window.addEventListener("keydown", (e) => { if (animating || !ready) return; const k = e.key; if (k === "ArrowDown" || k === "PageDown" || k === " ") { e.preventDefault(); next(); } else if (k === "ArrowUp" || k === "PageUp") { e.preventDefault(); prev(); } else if (k === "Home" && index !== 0) { e.preventDefault(); goTo(0, -1); } else if (k === "End" && index !== PROJECTS.length - 1) { e.preventDefault(); goTo(PROJECTS.length - 1, 1); } }); slider.addEventListener("pointerdown", () => { slider.classList.add("is-dragging"); stopAutoplay(); }); window.addEventListener("pointerup", () => { slider.classList.remove("is-dragging"); }); document.addEventListener("visibilitychange", () => { if (document.hidden) stopAutoplay(); else if (!animating && ready) startAutoplay(); }); let resizeTimer; window.addEventListener("resize", () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { if (!animating) positionAll(true); }, 80); }); } /* -------------------------------------------------------------------- Intro + loader -------------------------------------------------------------------- */ async function preload() { const urls = PROJECTS.flatMap((p) => [p.imageLeft, p.imageRight]); let done = 0; const total = urls.length; const failed = []; await Promise.all( urls.map(async (src) => { const result = await loadImage(src); if (!result.ok) failed.push(src); done += 1; if (loaderBar) { gsap.to(loaderBar, { scaleX: done / total, duration: 0.25, ease: "power2.out", overwrite: true, }); } }) ); if (failed.length) { console.warn("[Abbos slider] Some images failed to preload:", failed); } } function intro() { const chrome = [brand, countEl].filter(Boolean); gsap.set(chrome, { autoAlpha: 0, y: 10 }); gsap.set([trackLeft, trackRight], { autoAlpha: 0 }); // Align at rest before reveal positionAll(true); const tl = gsap.timeline({ defaults: { ease: "power3.out" }, onComplete: () => { ready = true; startKenBurns(0); startAutoplay(); }, }); // Dismiss loader if (loader) { tl.to(loader, { autoAlpha: 0, duration: 0.55, ease: "power2.inOut", onComplete: () => loader.classList.add("is-done"), }); } // Split entrance — halves meet from opposite offsets tl.fromTo( leftSlides[0], { y: 60 }, { y: 0, duration: 1.1, ease: "power4.out" }, 0.2 ); tl.fromTo( rightSlides[0], { y: -60 }, { y: 0, duration: 1.1, ease: "power4.out" }, 0.2 ); tl.to( [trackLeft, trackRight], { autoAlpha: 1, duration: 0.6 }, 0.15 ); // Content fade up const firstContent = [ leftSlides[0].querySelector(".slide__content"), rightSlides[0].querySelector(".slide__content"), ]; tl.fromTo( firstContent, { y: 28, opacity: 0 }, { y: 0, opacity: 1, duration: 0.9, ease: "power3.out" }, 0.45 ); // Chrome tl.to( chrome, { autoAlpha: 1, y: 0, duration: 0.7, stagger: 0.06 }, 0.55 ); } /* -------------------------------------------------------------------- Boot -------------------------------------------------------------------- */ async function init() { if (typeof gsap === "undefined") { console.error("GSAP failed to load."); return; } gsap.config({ force3D: true, nullTargetWarn: false }); if (typeof Observer !== "undefined") { gsap.registerPlugin(Observer); } build(); bindObserver(); try { await preload(); } catch (_) { /* continue even if some images fail */ } intro(); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } })();

GSAP Split This Infinite Content Slider