/** * Draggable Marquee (Directional) * Infinite feedback cards · drag flips direction · GSAP */ (function () { "use strict"; // ── Feedback data (Unsplash portraits that resolve reliably) ── const FEEDBACKS = [ { name: "Sarah Chen", role: "Founder · Bloom Studio", quote: "Delivered a polished product ahead of schedule. Communication was clear every step — exactly what you want on Upwork.", rating: 5, avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=120&h=120&q=80", }, { name: "Marcus Reid", role: "CTO · Northline Apps", quote: "Animations feel premium without hurting performance. Our landing page conversion jumped within the first week.", rating: 5, avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=120&h=120&q=80", }, { name: "Elena Vargas", role: "Product Lead · Kite", quote: "Thoughtful motion design and clean code. Hand-off was documentation-ready — our team shipped the same day.", rating: 5, avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=120&h=120&q=80", }, { name: "James Okonkwo", role: "CEO · Atlas Finance", quote: "Rare mix of aesthetics and engineering. The marquee and micro-interactions made our brand feel world-class.", rating: 5, avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=120&h=120&q=80", }, { name: "Priya Nair", role: "Marketing Dir. · Lumen", quote: "Client feedback cards look fantastic in both themes. Drag feels buttery — our stakeholders were impressed live.", rating: 5, avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=120&h=120&q=80", }, { name: "Daniel Foster", role: "Design Manager · Orbit", quote: "Pixel-perfect implementation of the brief. Easy to customize, and the Upwork collaboration was seamless.", rating: 5, avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=120&h=120&q=80", }, { name: "Amina Hassan", role: "Founder · Softcraft", quote: "Professional from kickoff to delivery. We reused the pattern across three campaigns without a hitch.", rating: 5, avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=120&h=120&q=80", }, { name: "Noah Bergman", role: "Head of Growth · Peak", quote: "Smooth directional drag is the detail that sells the craft. Best freelancer experience we've had this year.", rating: 5, avatar: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?auto=format&fit=crop&w=120&h=120&q=80", }, ]; const BASE_SPEED = 0.65; // px per frame-ish (scaled by dt) const DRAG_INFLUENCE = 1; const VELOCITY_DECAY = 0.94; const MIN_VELOCITY = 0.08; const DIRECTION_THRESHOLD = 0.35; // ── Theme ─────────────────────────────────────────────────── function initTheme() { const root = document.documentElement; const toggle = document.querySelector("[data-theme-toggle]"); if (!toggle) return; const stored = localStorage.getItem("marquee-theme"); const prefersLight = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches; const initial = stored || (prefersLight ? "light" : "dark"); applyTheme(initial); toggle.addEventListener("click", () => { const next = root.getAttribute("data-theme") === "dark" ? "light" : "dark"; applyTheme(next); localStorage.setItem("marquee-theme", next); }); function applyTheme(theme) { root.setAttribute("data-theme", theme); toggle.setAttribute( "aria-label", theme === "dark" ? "Switch to light mode" : "Switch to dark mode" ); } } // ── Build cards ───────────────────────────────────────────── function buildCards(track, template) { const fragment = document.createDocumentFragment(); FEEDBACKS.forEach((item) => { const node = template.content.cloneNode(true); const card = node.querySelector("[data-feedback-card]"); const stars = node.querySelector("[data-stars]"); const quote = node.querySelector("[data-quote]"); const avatar = node.querySelector("[data-avatar]"); const name = node.querySelector("[data-name]"); const role = node.querySelector("[data-role]"); quote.textContent = item.quote; name.textContent = item.name; role.textContent = item.role; avatar.src = item.avatar; avatar.alt = item.name; stars.setAttribute("aria-label", `${item.rating} star rating`); // Fill star icons const starSvg = stars.querySelector("svg"); if (starSvg) { const starTemplate = starSvg.cloneNode(true); stars.innerHTML = ""; for (let i = 0; i < item.rating; i++) { stars.appendChild(starTemplate.cloneNode(true)); } } card.setAttribute("data-name", item.name); fragment.appendChild(node); }); track.appendChild(fragment); } function duplicateForLoop(track) { const originals = Array.from(track.children); if (!originals.length) return; // Enough copies so the loop never shows a gap on wide screens const copies = 2; for (let c = 0; c < copies; c++) { originals.forEach((el) => { const clone = el.cloneNode(true); clone.setAttribute("aria-hidden", "true"); // Avoid duplicate image decoding thrash on clones if already loaded const img = clone.querySelector("img"); if (img) img.loading = "lazy"; track.appendChild(clone); }); } } // ── Marquee engine ────────────────────────────────────────── function initMarquee(root) { const viewport = root.querySelector("[data-marquee-viewport]"); const track = root.querySelector("[data-marquee-track]"); const template = document.getElementById("feedback-card-template"); const hint = document.querySelector("[data-drag-hint]"); if (!viewport || !track || !template) return; buildCards(track, template); duplicateForLoop(track); let x = 0; let direction = -1; // -1 left (default marquee), +1 right let velocity = 0; let isDragging = false; let dragStartX = 0; let dragStartOffset = 0; let lastPointerX = 0; let lastTime = performance.now(); let pointerId = null; let loopWidth = 0; let hasDragged = false; let reducedMotion = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; function measure() { const firstSetCount = FEEDBACKS.length; const cards = track.children; if (cards.length < firstSetCount) { loopWidth = track.scrollWidth / 3; return; } // Width of one original set (gap included via offset of first clone) const first = cards[0]; const boundary = cards[firstSetCount]; if (boundary) { loopWidth = boundary.offsetLeft - first.offsetLeft; } else { loopWidth = track.scrollWidth / 3; } } function wrap(value) { if (!loopWidth) return value; // Keep x in (-loopWidth, 0] let v = value % loopWidth; if (v > 0) v -= loopWidth; if (v <= -loopWidth) v += loopWidth; return v; } function render() { gsap.set(track, { x: x, force3D: true }); } function onPointerDown(e) { if (e.button !== undefined && e.button !== 0) return; isDragging = true; pointerId = e.pointerId; dragStartX = e.clientX; dragStartOffset = x; lastPointerX = e.clientX; lastTime = performance.now(); velocity = 0; root.classList.add("is-dragging"); if (hint) hint.classList.add("is-hidden"); try { viewport.setPointerCapture(e.pointerId); } catch (_) { /* ignore */ } } function onPointerMove(e) { if (!isDragging || (pointerId !== null && e.pointerId !== pointerId)) { return; } const now = performance.now(); const dt = Math.max(now - lastTime, 1); const dx = e.clientX - dragStartX; x = wrap(dragStartOffset + dx * DRAG_INFLUENCE); render(); const frameDx = e.clientX - lastPointerX; velocity = frameDx / dt; // px per ms lastPointerX = e.clientX; lastTime = now; if (Math.abs(dx) > 4) hasDragged = true; } function onPointerUp(e) { if (!isDragging) return; if (pointerId !== null && e.pointerId !== pointerId) return; isDragging = false; pointerId = null; root.classList.remove("is-dragging"); // Directional behavior: keep moving in the drag direction const speed = velocity * 16; // rough px/frame scale if (Math.abs(speed) > DIRECTION_THRESHOLD) { direction = speed > 0 ? 1 : -1; } try { viewport.releasePointerCapture(e.pointerId); } catch (_) { /* ignore */ } } // Wheel: light nudge + optional direction flip function onWheel(e) { if (Math.abs(e.deltaX) < Math.abs(e.deltaY) && Math.abs(e.deltaX) < 2) { return; } e.preventDefault(); const delta = e.deltaX !== 0 ? e.deltaX : e.deltaY; x = wrap(x - delta * 0.45); if (Math.abs(delta) > 2) { direction = delta > 0 ? -1 : 1; } velocity = 0; render(); if (hint) hint.classList.add("is-hidden"); } function tick(time) { const dt = Math.min(time - lastTick, 48); lastTick = time; if (!isDragging && !reducedMotion) { // Blend drag inertia into constant cruise in the chosen direction const cruise = direction * BASE_SPEED * (dt / 16); if (Math.abs(velocity) > MIN_VELOCITY / 16) { x = wrap(x + velocity * dt); velocity *= Math.pow(VELOCITY_DECAY, dt / 16); // Ease into cruise when inertia is low if (Math.abs(velocity) * dt < Math.abs(cruise) * 1.15) { velocity = 0; x = wrap(x + cruise); } } else { x = wrap(x + cruise); } render(); } requestAnimationFrame(tick); } let lastTick = performance.now(); // Events viewport.addEventListener("pointerdown", onPointerDown); viewport.addEventListener("pointermove", onPointerMove); viewport.addEventListener("pointerup", onPointerUp); viewport.addEventListener("pointercancel", onPointerUp); viewport.addEventListener("wheel", onWheel, { passive: false }); // Prevent image drag ghosts track.addEventListener("dragstart", (e) => e.preventDefault()); // Resize let resizeTimer; const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => { clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { measure(); x = wrap(x); render(); }, 80); }) : null; if (ro) ro.observe(track); window.addEventListener("resize", () => { measure(); x = wrap(x); render(); }); window .matchMedia("(prefers-reduced-motion: reduce)") .addEventListener("change", (e) => { reducedMotion = e.matches; }); // Wait for images so measurement is accurate const images = Array.from(track.querySelectorAll("img")); let pending = images.length; function start() { measure(); x = 0; render(); requestAnimationFrame(tick); // Soft entrance on cards (track x is driven separately) gsap.fromTo( track.querySelectorAll("[data-feedback-card]"), { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: 0.7, stagger: 0.04, ease: "power3.out", } ); } if (pending === 0) { start(); } else { images.forEach((img) => { if (img.complete) { pending -= 1; if (pending === 0) start(); } else { img.addEventListener( "load", () => { pending -= 1; if (pending === 0) start(); }, { once: true } ); img.addEventListener( "error", () => { // Fallback avatar if Unsplash fails img.src = "data:image/svg+xml," + encodeURIComponent( `` ); pending -= 1; if (pending === 0) start(); }, { once: true } ); } }); // Safety timeout setTimeout(() => { if (pending > 0) { pending = 0; start(); } }, 2500); } // Expose for debugging return { setDirection(dir) { direction = dir >= 0 ? 1 : -1; }, get hasDragged() { return hasDragged; }, }; } // ── Boot ──────────────────────────────────────────────────── function boot() { initTheme(); const root = document.querySelector("[data-marquee]"); if (root) initMarquee(root); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", boot); } else { boot(); } })();