From d58c9c50598d90b6deae76dbb607e81a190772d0 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 30 Oct 2025 15:39:16 +0530 Subject: [PATCH] scroll animation and card width --- css/style.css | 14 +++--- js/main.js | 132 +++++++++++++++----------------------------------- 2 files changed, 47 insertions(+), 99 deletions(-) diff --git a/css/style.css b/css/style.css index d23c8b3..f2fb3c6 100644 --- a/css/style.css +++ b/css/style.css @@ -1954,7 +1954,7 @@ span.textaccor { border-radius: 12px; margin-top: 0px; margin-right: 10px; - width: 47%; + width: 45%; } .padding-icon1 { @@ -1963,7 +1963,7 @@ span.textaccor { border-radius: 12px; margin-top: 0px; margin-left: 10px; - width: 47%; + width: 45%; } .padding-icon2 { @@ -1972,7 +1972,7 @@ span.textaccor { border-radius: 12px; margin-top: 20px; margin-right: 10px; - width: 47%; + width: 45%; } .padding-icon3 { @@ -1981,7 +1981,7 @@ span.textaccor { border-radius: 12px; margin-top: 20px; margin-left: 10px; - width: 47%; + width: 45%; } .padding-icon4 { @@ -1999,7 +1999,7 @@ span.textaccor { border-radius: 12px; margin-top: 20px; margin-left: 10px; - width: 47%; + width: 45%; } .padding-icon6 { @@ -2008,7 +2008,7 @@ span.textaccor { border-radius: 12px; margin-top: 20px; margin-right: 10px; - width: 47%; + width: 45%; } .padding-icon7 { @@ -2017,7 +2017,7 @@ span.textaccor { border-radius: 12px; margin-top: 20px; margin-left: 10px; - width: 47%; + width: 45%; } .mt-row { diff --git a/js/main.js b/js/main.js index 742faf9..da90ade 100644 --- a/js/main.js +++ b/js/main.js @@ -332,7 +332,6 @@ let animating = false; let isSectionPinned = false; let scrollTrigger; let allowNormalScroll = false; -let scrollLockPosition = 0; // =============================== // ✅ GSAP Stack Scroll with Section Pinning @@ -347,22 +346,22 @@ function initGsapStackScroll() { cards = Array.from(cardsWrapper.querySelectorAll(".card-scroll")); if (!cards.length) return; - // Initial setup + // Initial setup - Using your simple stacking logic gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 }); gsap.set(cards[0], { opacity: 1, y: "60px", zIndex: 5 }); currentIndex = 0; allowNormalScroll = false; - // Calculate exact pinning distance + //Calculate exact pinning distance const cardHeight = cardsWrapper.offsetHeight; const totalCards = cards.length; - const pinningDistance = cardHeight * totalCards * 0.4; + const pinningDistance = cardHeight * totalCards * 1.5; // Adjust multiplier as needed - // Scroll pinning logic + // Scroll pinning logic from updated code scrollTrigger = ScrollTrigger.create({ trigger: cardsWrapper, start: "top top", - end: `+=${pinningDistance}`, + end:`+=${pinningDistance}`, pin: true, anticipatePin: 1, pinSpacing: true, @@ -376,6 +375,7 @@ function initGsapStackScroll() { onLeave: () => { isSectionPinned = false; allowNormalScroll = true; + console.log("Left pinned section"); }, onEnterBack: () => { isSectionPinned = true; @@ -387,89 +387,34 @@ function initGsapStackScroll() { } }); - // deepseek today code: Enhanced scroll prevention with visible scrollbar + // Global wheel handler that checks if section is pinned window._gsapStackHandler = function (e) { - if (isSectionPinned && !allowNormalScroll) { - e.preventDefault(); - e.stopPropagation(); - - if (animating) { - // If already animating, just prevent scroll completely - return; - } - - if (e.deltaY > 0) { - showNextGsapCard(); - } else if (e.deltaY < 0) { - showPrevGsapCard(); - } + if (!isSectionPinned || animating) return; + + // Allow normal scrolling when at boundaries + if (allowNormalScroll || + (e.deltaY > 0 && currentIndex >= cards.length - 1) || + (e.deltaY < 0 && currentIndex <= 0)) { + return; + } + + e.preventDefault(); + + if (e.deltaY > 0) { + showNextGsapCard(); + } else { + showPrevGsapCard(); } }; - // Add wheel event listener - window.addEventListener("wheel", window._gsapStackHandler, { - passive: false + window.addEventListener("wheel", window._gsapStackHandler, { + passive: false, }); - - // deepseek today code: Active scroll position locking during animations - window._scrollLockHandler = function() { - if (isSectionPinned && !allowNormalScroll && animating) { - // Immediately restore to locked position - window.scrollTo(0, scrollLockPosition); - } - }; - - window.addEventListener("scroll", window._scrollLockHandler, { passive: false }); - - // Prevent keyboard scrolling during animations - window.addEventListener("keydown", function(e) { - if (isSectionPinned && !allowNormalScroll && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === " " || e.key === "PageDown" || e.key === "PageUp")) { - e.preventDefault(); - - if (animating) return; - - if (e.key === "ArrowDown" || e.key === "PageDown" || e.key === " ") { - showNextGsapCard(); - } else if (e.key === "ArrowUp" || e.key === "PageUp") { - showPrevGsapCard(); - } - } - }); -} - -// deepseek today code: Enhanced scroll locking without hiding scrollbar -function lockScrollDuringAnimation() { - animating = true; - scrollLockPosition = window.scrollY; // Store current scroll position - - // Keep scrollbar visible but prevent any scroll movement - document.documentElement.style.overscrollBehavior = 'none'; - document.body.style.overscrollBehavior = 'none'; - - // Use requestAnimationFrame to continuously lock scroll position - function maintainScrollLock() { - if (animating && isSectionPinned && !allowNormalScroll) { - if (window.scrollY !== scrollLockPosition) { - window.scrollTo(0, scrollLockPosition); - } - requestAnimationFrame(maintainScrollLock); - } - } - - maintainScrollLock(); -} - -function unlockScrollAfterAnimation() { - animating = false; - - // Restore normal scroll behavior - document.documentElement.style.overscrollBehavior = ''; - document.body.style.overscrollBehavior = ''; } // Reset to first card function function resetToFirstCard() { - lockScrollDuringAnimation(); + animating = true; // Hide all cards gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 }); @@ -481,18 +426,19 @@ function resetToFirstCard() { zIndex: 5, onComplete: () => { currentIndex = 0; - unlockScrollAfterAnimation(); + animating = false; allowNormalScroll = false; } }); } -// ✅ Show next card +// ✅ Show next card - Using your simple stacking logic function showNextGsapCard() { if (currentIndex >= cards.length - 1) { + // Enable normal scrolling when reaching last card allowNormalScroll = true; - unlockScrollAfterAnimation(); + // Add a small visual indicator that normal scrolling is available const lastCard = cards[currentIndex]; gsap.to(lastCard, { y: "50px", @@ -505,7 +451,7 @@ function showNextGsapCard() { return; } - lockScrollDuringAnimation(); + animating = true; const current = cards[currentIndex]; const next = cards[currentIndex + 1]; @@ -533,8 +479,9 @@ function showNextGsapCard() { onComplete: () => { currentIndex++; adjustVisibleCards(); - unlockScrollAfterAnimation(); + animating = false; + // Enable normal scrolling when reaching last card if (currentIndex >= cards.length - 1) { allowNormalScroll = true; } @@ -543,15 +490,15 @@ function showNextGsapCard() { ); } -// ✅ Show previous card +// ✅ Show previous card - Using your simple stacking logic function showPrevGsapCard() { if (currentIndex <= 0) { + // Enable normal scrolling when at first card allowNormalScroll = true; - unlockScrollAfterAnimation(); return; } - lockScrollDuringAnimation(); + animating = true; const current = cards[currentIndex]; const prev = cards[currentIndex - 1]; @@ -575,8 +522,9 @@ function showPrevGsapCard() { onComplete: () => { currentIndex--; adjustVisibleCards(); - unlockScrollAfterAnimation(); + animating = false; + // Disable normal scrolling if not at first card if (currentIndex > 0) { allowNormalScroll = false; } @@ -584,7 +532,7 @@ function showPrevGsapCard() { }); } -// ✅ Maintain only 3 visible cards in stack +// ✅ Maintain only 3 visible cards in stack - Using your simple stacking logic function adjustVisibleCards() { // Reset all first gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 }); @@ -603,8 +551,8 @@ function adjustVisibleCards() { for (let i = 1; i <= 2; i++) { const prevIndex = currentIndex - i; if (prevIndex >= 0) { - const yOffset = 60 - i * 25; - const scale = 1 - i * 0.05; + const yOffset = 60 - i * 25; // e.g., 60px, 35px + const scale = 1 - i * 0.05; // e.g., 1, 0.95, 0.9 const zIndex = 5 - i; gsap.set(cards[prevIndex], {