From 9554d760fa3bcdae312b3bb561ea5f2e382ec0b5 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Wed, 8 Apr 2026 16:46:43 +0200 Subject: [PATCH] TEST FIX AND KEEPING OLD VERSION --- .../src/scroll-story-block/view-old.js | 96 +++++++++++++++ .../src/scroll-story-block/view.js | 72 +++++++---- .../src/scroll-story-block/view_test-fix.js | 116 ++++++++++++++++++ 3 files changed, 258 insertions(+), 26 deletions(-) create mode 100644 plugins/carhop-blocks/src/scroll-story-block/view-old.js create mode 100644 plugins/carhop-blocks/src/scroll-story-block/view_test-fix.js diff --git a/plugins/carhop-blocks/src/scroll-story-block/view-old.js b/plugins/carhop-blocks/src/scroll-story-block/view-old.js new file mode 100644 index 0000000..9d1df58 --- /dev/null +++ b/plugins/carhop-blocks/src/scroll-story-block/view-old.js @@ -0,0 +1,96 @@ +const cards = gsap.utils.toArray(".scroll-story-block .narrative-card"); + +// Ajouter des classes alternées pour le styling +cards.forEach((card, index) => { + if (index % 2 === 0) { + card.classList.add("narrative-card--even"); + } else { + card.classList.add("narrative-card--odd"); + } +}); + +// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins) +const MOBILE_BREAKPOINT = 768; + +let scrollTriggers = []; +let stickDistance = 0; + +// Fonction pour initialiser les ScrollTriggers (desktop) +function initScrollTriggers() { + // Nettoyer d'abord les ScrollTriggers existants + killScrollTriggers(); + + if (cards.length === 0) return; + + let firstCardST = ScrollTrigger.create({ + trigger: cards[0], + start: "top 10%", + }); + scrollTriggers.push(firstCardST); + + let lastCardST = ScrollTrigger.create({ + trigger: cards[cards.length - 1], + start: "top 10%", + }); + scrollTriggers.push(lastCardST); + + cards.forEach((card, index) => { + var scale = 1 - (cards.length - index) * 0.025; + let scaleDown = gsap.to(card, { + scale: scale, + "transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"', + }); + + let cardST = ScrollTrigger.create({ + trigger: card, + start: "top 10%", + end: () => lastCardST.start + stickDistance, + pin: true, + // markers: true, + pinSpacing: false, + ease: "none", + animation: scaleDown, + toggleActions: "restart none none reverse", + }); + + scrollTriggers.push(cardST); + }); +} + +// Fonction pour détruire tous les ScrollTriggers +function killScrollTriggers() { + scrollTriggers.forEach((st) => st.kill()); + scrollTriggers = []; + + // Réinitialiser les styles inline des cartes + cards.forEach((card) => { + gsap.set(card, { clearProps: "all" }); + }); +} + +// Fonction pour gérer le responsive +function handleResize() { + const isMobile = window.innerWidth < MOBILE_BREAKPOINT; + + if (isMobile) { + // Sur mobile : détruire les ScrollTriggers + killScrollTriggers(); + } else { + // Sur desktop : créer les ScrollTriggers s'ils n'existent pas + if (scrollTriggers.length === 0) { + initScrollTriggers(); + } + } +} + +// Initialisation au chargement +handleResize(); + +// Écouter les événements de resize avec debounce pour optimiser les performances +let resizeTimer; +window.addEventListener("resize", () => { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(() => { + handleResize(); + }, 250); +}); diff --git a/plugins/carhop-blocks/src/scroll-story-block/view.js b/plugins/carhop-blocks/src/scroll-story-block/view.js index 9d1df58..e98f317 100644 --- a/plugins/carhop-blocks/src/scroll-story-block/view.js +++ b/plugins/carhop-blocks/src/scroll-story-block/view.js @@ -1,25 +1,31 @@ -const cards = gsap.utils.toArray(".scroll-story-block .narrative-card"); - -// Ajouter des classes alternées pour le styling -cards.forEach((card, index) => { - if (index % 2 === 0) { - card.classList.add("narrative-card--even"); - } else { - card.classList.add("narrative-card--odd"); - } -}); - -// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins) const MOBILE_BREAKPOINT = 768; let scrollTriggers = []; let stickDistance = 0; -// Fonction pour initialiser les ScrollTriggers (desktop) -function initScrollTriggers() { - // Nettoyer d'abord les ScrollTriggers existants - killScrollTriggers(); +function getBlocks() { + return gsap.utils.toArray(".scroll-story-block"); +} +function getBlockCards(block) { + return gsap.utils.toArray(block.querySelectorAll(".narrative-card")); +} + +function applyEvenOddClasses() { + getBlocks().forEach((block) => { + getBlockCards(block).forEach((card, index) => { + card.classList.remove("narrative-card--even", "narrative-card--odd"); + if (index % 2 === 0) { + card.classList.add("narrative-card--even"); + } else { + card.classList.add("narrative-card--odd"); + } + }); + }); +} + +function initScrollTriggersForBlock(block) { + const cards = getBlockCards(block); if (cards.length === 0) return; let firstCardST = ScrollTrigger.create({ @@ -38,7 +44,8 @@ function initScrollTriggers() { var scale = 1 - (cards.length - index) * 0.025; let scaleDown = gsap.to(card, { scale: scale, - "transform-origin": '"50% ' + (lastCardST.start + stickDistance) + '"', + // transformOrigin: "50% " + (lastCardST.start + stickDistance), + // transformOrigin: "center top", }); let cardST = ScrollTrigger.create({ @@ -46,8 +53,9 @@ function initScrollTriggers() { start: "top 10%", end: () => lastCardST.start + stickDistance, pin: true, - // markers: true, + markers: true, pinSpacing: false, + // pinSpacing: true, ease: "none", animation: scaleDown, toggleActions: "restart none none reverse", @@ -57,36 +65,48 @@ function initScrollTriggers() { }); } -// Fonction pour détruire tous les ScrollTriggers +function initScrollTriggers() { + killScrollTriggers(); + + getBlocks().forEach((block) => { + initScrollTriggersForBlock(block); + }); + + ScrollTrigger.refresh(); +} + function killScrollTriggers() { scrollTriggers.forEach((st) => st.kill()); scrollTriggers = []; - // Réinitialiser les styles inline des cartes - cards.forEach((card) => { + gsap.utils.toArray(".scroll-story-block .narrative-card").forEach((card) => { gsap.set(card, { clearProps: "all" }); }); } -// Fonction pour gérer le responsive function handleResize() { const isMobile = window.innerWidth < MOBILE_BREAKPOINT; if (isMobile) { - // Sur mobile : détruire les ScrollTriggers killScrollTriggers(); } else { - // Sur desktop : créer les ScrollTriggers s'ils n'existent pas if (scrollTriggers.length === 0) { initScrollTriggers(); + } else { + ScrollTrigger.refresh(); } } } -// Initialisation au chargement +applyEvenOddClasses(); handleResize(); -// Écouter les événements de resize avec debounce pour optimiser les performances +window.addEventListener("load", () => { + if (window.innerWidth >= MOBILE_BREAKPOINT && scrollTriggers.length > 0) { + ScrollTrigger.refresh(); + } +}); + let resizeTimer; window.addEventListener("resize", () => { clearTimeout(resizeTimer); diff --git a/plugins/carhop-blocks/src/scroll-story-block/view_test-fix.js b/plugins/carhop-blocks/src/scroll-story-block/view_test-fix.js new file mode 100644 index 0000000..275411d --- /dev/null +++ b/plugins/carhop-blocks/src/scroll-story-block/view_test-fix.js @@ -0,0 +1,116 @@ +const MOBILE_BREAKPOINT = 768; + +let scrollTriggers = []; +let stickDistance = 0; + +function getBlocks() { + return gsap.utils.toArray(".scroll-story-block"); +} + +function getBlockCards(block) { + return gsap.utils.toArray(block.querySelectorAll(".narrative-card")); +} + +function applyEvenOddClasses() { + getBlocks().forEach((block) => { + getBlockCards(block).forEach((card, index) => { + card.classList.remove("narrative-card--even", "narrative-card--odd"); + if (index % 2 === 0) { + card.classList.add("narrative-card--even"); + } else { + card.classList.add("narrative-card--odd"); + } + }); + }); +} + +function initScrollTriggersForBlock(block) { + const cards = getBlockCards(block); + if (cards.length === 0) return; + + let firstCardST = ScrollTrigger.create({ + trigger: cards[0], + start: "top 10%", + }); + scrollTriggers.push(firstCardST); + + let lastCardST = ScrollTrigger.create({ + trigger: cards[cards.length - 1], + start: "top 10%", + }); + scrollTriggers.push(lastCardST); + + cards.forEach((card, index) => { + var scale = 1 - (cards.length - index) * 0.025; + let scaleDown = gsap.to(card, { + scale: scale, + // transformOrigin: "50% " + (lastCardST.start + stickDistance), + // transformOrigin: "center top", + }); + + let cardST = ScrollTrigger.create({ + trigger: card, + start: "top 10%", + end: () => lastCardST.start + stickDistance, + pin: true, + markers: true, + pinSpacing: false, + // pinSpacing: true, + ease: "none", + animation: scaleDown, + toggleActions: "restart none none reverse", + }); + + scrollTriggers.push(cardST); + }); +} + +function initScrollTriggers() { + killScrollTriggers(); + + getBlocks().forEach((block) => { + initScrollTriggersForBlock(block); + }); + + ScrollTrigger.refresh(); +} + +function killScrollTriggers() { + scrollTriggers.forEach((st) => st.kill()); + scrollTriggers = []; + + gsap.utils.toArray(".scroll-story-block .narrative-card").forEach((card) => { + gsap.set(card, { clearProps: "all" }); + }); +} + +function handleResize() { + const isMobile = window.innerWidth < MOBILE_BREAKPOINT; + + if (isMobile) { + killScrollTriggers(); + } else { + if (scrollTriggers.length === 0) { + initScrollTriggers(); + } else { + ScrollTrigger.refresh(); + } + } +} + +applyEvenOddClasses(); +handleResize(); + +window.addEventListener("load", () => { + if (window.innerWidth >= MOBILE_BREAKPOINT && scrollTriggers.length > 0) { + ScrollTrigger.refresh(); + } +}); + +let resizeTimer; +window.addEventListener("resize", () => { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(() => { + handleResize(); + }, 250); +});