TEST FIX AND KEEPING OLD VERSION

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);
+});

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);

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);
+});