diff --git a/js/main.js b/js/main.js index 05c61af..69f623b 100644 --- a/js/main.js +++ b/js/main.js @@ -334,7 +334,7 @@ let scrollTrigger; let allowNormalScroll = false; // =============================== -// ✅ GSAP Stack Scroll with Section Pinning (Fixed Scroll Lock Only) +// ✅ GSAP Stack Scroll with Section Pinning (Desktop + Mobile Support) // =============================== function initGsapStackScroll() { const section = document.querySelector(".ask-advantage-scroll"); @@ -386,18 +386,17 @@ function initGsapStackScroll() { }, }); - // ✅ Wheel handler with scroll block fix + // ✅ Wheel handler (desktop) window._gsapStackHandler = function (e) { if (!isSectionPinned) return; - // Completely block scroll while animating if (animating) { e.preventDefault(); e.stopPropagation(); return; } - // Boundaries check + // Boundaries if ( (e.deltaY > 0 && currentIndex >= cards.length - 1) || (e.deltaY < 0 && currentIndex <= 0) @@ -406,7 +405,6 @@ function initGsapStackScroll() { return; } - // Start animation & block scroll during it e.preventDefault(); e.stopPropagation(); @@ -425,7 +423,7 @@ function initGsapStackScroll() { (e.key === "ArrowDown" && currentIndex >= cards.length - 1) || (e.key === "ArrowUp" && currentIndex <= 0) ) { - return; // Allow normal scroll at boundaries + return; } if (e.key === "ArrowDown") { @@ -437,10 +435,40 @@ function initGsapStackScroll() { } }; - window.addEventListener("wheel", window._gsapStackHandler, { - passive: false, - }); + // ✅ Touch handler (mobile) + let touchStartY = 0; + let touchEndY = 0; + + window._gsapTouchStart = function (e) { + touchStartY = e.touches[0].clientY; + }; + + window._gsapTouchMove = function (e) { + touchEndY = e.touches[0].clientY; + }; + + window._gsapTouchEnd = function () { + if (!isSectionPinned || animating) return; + const deltaY = touchStartY - touchEndY; + + // Swipe threshold + if (Math.abs(deltaY) < 40) return; + + if (deltaY > 0) { + // Swipe up → next card + showNextGsapCard(); + } else { + // Swipe down → previous card + showPrevGsapCard(); + } + }; + + // Attach listeners + window.addEventListener("wheel", window._gsapStackHandler, { passive: false }); window.addEventListener("keydown", window._gsapKeyHandler); + window.addEventListener("touchstart", window._gsapTouchStart, { passive: true }); + window.addEventListener("touchmove", window._gsapTouchMove, { passive: true }); + window.addEventListener("touchend", window._gsapTouchEnd); } // ✅ Reset to first card @@ -494,7 +522,6 @@ function showNextGsapCard() { adjustVisibleCards(); animating = false; - // ✅ Allow normal scroll only after last card animation completes if (currentIndex >= cards.length - 1) { allowNormalScroll = true; ScrollTrigger.refresh(true); @@ -545,7 +572,6 @@ function showPrevGsapCard() { function adjustVisibleCards() { gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 }); - // Active card if (cards[currentIndex]) { gsap.set(cards[currentIndex], { y: "60px", @@ -555,7 +581,6 @@ function adjustVisibleCards() { }); } - // Show only 2 previous cards for (let i = 1; i <= 2; i++) { const prevIndex = currentIndex - i; if (prevIndex >= 0) { @@ -572,7 +597,6 @@ function adjustVisibleCards() { } } - // Hide older cards const hideIndex = currentIndex - 3; if (hideIndex >= 0 && cards[hideIndex]) { gsap.to(cards[hideIndex], { @@ -586,15 +610,17 @@ function adjustVisibleCards() { // ✅ Cleanup function function cleanupGsapStackScroll() { - if (window._gsapStackHandler) { + if (window._gsapStackHandler) window.removeEventListener("wheel", window._gsapStackHandler); - } - if (window._gsapKeyHandler) { + if (window._gsapKeyHandler) window.removeEventListener("keydown", window._gsapKeyHandler); - } - if (scrollTrigger) { - scrollTrigger.kill(); - } + if (window._gsapTouchStart) + window.removeEventListener("touchstart", window._gsapTouchStart); + if (window._gsapTouchMove) + window.removeEventListener("touchmove", window._gsapTouchMove); + if (window._gsapTouchEnd) + window.removeEventListener("touchend", window._gsapTouchEnd); + if (scrollTrigger) scrollTrigger.kill(); } // Initialize after DOM load @@ -602,6 +628,7 @@ document.addEventListener("DOMContentLoaded", initGsapStackScroll); window.addEventListener("beforeunload", cleanupGsapStackScroll); + // =============================== // ✅ Load Page Content Dynamically // ===============================