{hasCover && coverUrl &&
}
diff --git a/plugins/carhop-blocks/blocks/scroll-story-block/build/view.asset.php b/plugins/carhop-blocks/blocks/scroll-story-block/build/view.asset.php
index cd12b22..cb24c78 100644
--- a/plugins/carhop-blocks/blocks/scroll-story-block/build/view.asset.php
+++ b/plugins/carhop-blocks/blocks/scroll-story-block/build/view.asset.php
@@ -1 +1 @@
- array(), 'version' => '21d21202ac10eacbe2b5');
+ array(), 'version' => '1b701c330e8d0efc09fe');
diff --git a/plugins/carhop-blocks/blocks/scroll-story-block/build/view.js b/plugins/carhop-blocks/blocks/scroll-story-block/build/view.js
index 8fcefc9..b406124 100644
--- a/plugins/carhop-blocks/blocks/scroll-story-block/build/view.js
+++ b/plugins/carhop-blocks/blocks/scroll-story-block/build/view.js
@@ -12,32 +12,85 @@ cards.forEach((card, index) => {
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;
-let firstCardST = ScrollTrigger.create({
- trigger: cards[0],
- start: "top 10%"
-});
-let lastCardST = ScrollTrigger.create({
- trigger: cards[cards.length - 1],
- start: "top 10%"
-});
-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) + '"'
+
+// 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%"
});
- 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(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/blocks/scroll-story-block/build/view.js.map b/plugins/carhop-blocks/blocks/scroll-story-block/build/view.js.map
index 0b4f798..e0482d9 100644
--- a/plugins/carhop-blocks/blocks/scroll-story-block/build/view.js.map
+++ b/plugins/carhop-blocks/blocks/scroll-story-block/build/view.js.map
@@ -1 +1 @@
-{"version":3,"file":"view.js","mappings":";;;;AAAA,MAAMA,KAAK,GAAGC,IAAI,CAACC,KAAK,CAACC,OAAO,CAAC,qCAAqC,CAAC;;AAEvE;AACAH,KAAK,CAACI,OAAO,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;EAC9B,IAAIA,KAAK,GAAG,CAAC,KAAK,CAAC,EAAE;IACpBD,IAAI,CAACE,SAAS,CAACC,GAAG,CAAC,sBAAsB,CAAC;EAC3C,CAAC,MAAM;IACNH,IAAI,CAACE,SAAS,CAACC,GAAG,CAAC,qBAAqB,CAAC;EAC1C;AACD,CAAC,CAAC;AAEF,IAAIC,aAAa,GAAG,CAAC;AAErB,IAAIC,WAAW,GAAGC,aAAa,CAACC,MAAM,CAAC;EACtCC,OAAO,EAAEb,KAAK,CAAC,CAAC,CAAC;EACjBc,KAAK,EAAE;AACR,CAAC,CAAC;AAEF,IAAIC,UAAU,GAAGJ,aAAa,CAACC,MAAM,CAAC;EACrCC,OAAO,EAAEb,KAAK,CAACA,KAAK,CAACgB,MAAM,GAAG,CAAC,CAAC;EAChCF,KAAK,EAAE;AACR,CAAC,CAAC;AAEFd,KAAK,CAACI,OAAO,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;EAC9B,IAAIW,KAAK,GAAG,CAAC,GAAG,CAACjB,KAAK,CAACgB,MAAM,GAAGV,KAAK,IAAI,KAAK;EAC9C,IAAIY,SAAS,GAAGjB,IAAI,CAACkB,EAAE,CAACd,IAAI,EAAE;IAC7BY,KAAK,EAAEA,KAAK;IACZ,kBAAkB,EAAE,OAAO,IAAIF,UAAU,CAACD,KAAK,GAAGL,aAAa,CAAC,GAAG;EACpE,CAAC,CAAC;EAEFE,aAAa,CAACC,MAAM,CAAC;IACpBC,OAAO,EAAER,IAAI;IACbS,KAAK,EAAE,SAAS;IAChBM,GAAG,EAAEA,CAAA,KAAML,UAAU,CAACD,KAAK,GAAGL,aAAa;IAC3CY,GAAG,EAAE,IAAI;IACT;IACAC,UAAU,EAAE,KAAK;IACjBC,IAAI,EAAE,MAAM;IACZC,SAAS,EAAEN,SAAS;IACpBO,aAAa,EAAE;EAChB,CAAC,CAAC;AACH,CAAC,CAAC,C","sources":["webpack://cta/./src/view.js"],"sourcesContent":["const cards = gsap.utils.toArray(\".scroll-story-block .narrative-card\");\r\n\r\n// Ajouter des classes alternées pour le styling\r\ncards.forEach((card, index) => {\r\n\tif (index % 2 === 0) {\r\n\t\tcard.classList.add(\"narrative-card--even\");\r\n\t} else {\r\n\t\tcard.classList.add(\"narrative-card--odd\");\r\n\t}\r\n});\r\n\r\nlet stickDistance = 0;\r\n\r\nlet firstCardST = ScrollTrigger.create({\r\n\ttrigger: cards[0],\r\n\tstart: \"top 10%\",\r\n});\r\n\r\nlet lastCardST = ScrollTrigger.create({\r\n\ttrigger: cards[cards.length - 1],\r\n\tstart: \"top 10%\",\r\n});\r\n\r\ncards.forEach((card, index) => {\r\n\tvar scale = 1 - (cards.length - index) * 0.025;\r\n\tlet scaleDown = gsap.to(card, {\r\n\t\tscale: scale,\r\n\t\t\"transform-origin\": '\"50% ' + (lastCardST.start + stickDistance) + '\"',\r\n\t});\r\n\r\n\tScrollTrigger.create({\r\n\t\ttrigger: card,\r\n\t\tstart: \"top 10%\",\r\n\t\tend: () => lastCardST.start + stickDistance,\r\n\t\tpin: true,\r\n\t\t// markers: true,\r\n\t\tpinSpacing: false,\r\n\t\tease: \"none\",\r\n\t\tanimation: scaleDown,\r\n\t\ttoggleActions: \"restart none none reverse\",\r\n\t});\r\n});\r\n"],"names":["cards","gsap","utils","toArray","forEach","card","index","classList","add","stickDistance","firstCardST","ScrollTrigger","create","trigger","start","lastCardST","length","scale","scaleDown","to","end","pin","pinSpacing","ease","animation","toggleActions"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"view.js","mappings":"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","sources":["webpack://cta/./src/view.js"],"sourcesContent":["const cards = gsap.utils.toArray(\".scroll-story-block .narrative-card\");\r\n\r\n// Ajouter des classes alternées pour le styling\r\ncards.forEach((card, index) => {\r\n\tif (index % 2 === 0) {\r\n\t\tcard.classList.add(\"narrative-card--even\");\r\n\t} else {\r\n\t\tcard.classList.add(\"narrative-card--odd\");\r\n\t}\r\n});\r\n\r\n// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins)\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\nlet scrollTriggers = [];\r\nlet stickDistance = 0;\r\n\r\n// Fonction pour initialiser les ScrollTriggers (desktop)\r\nfunction initScrollTriggers() {\r\n\t// Nettoyer d'abord les ScrollTriggers existants\r\n\tkillScrollTriggers();\r\n\r\n\tif (cards.length === 0) return;\r\n\r\n\tlet firstCardST = ScrollTrigger.create({\r\n\t\ttrigger: cards[0],\r\n\t\tstart: \"top 10%\",\r\n\t});\r\n\tscrollTriggers.push(firstCardST);\r\n\r\n\tlet lastCardST = ScrollTrigger.create({\r\n\t\ttrigger: cards[cards.length - 1],\r\n\t\tstart: \"top 10%\",\r\n\t});\r\n\tscrollTriggers.push(lastCardST);\r\n\r\n\tcards.forEach((card, index) => {\r\n\t\tvar scale = 1 - (cards.length - index) * 0.025;\r\n\t\tlet scaleDown = gsap.to(card, {\r\n\t\t\tscale: scale,\r\n\t\t\t\"transform-origin\": '\"50% ' + (lastCardST.start + stickDistance) + '\"',\r\n\t\t});\r\n\r\n\t\tlet cardST = ScrollTrigger.create({\r\n\t\t\ttrigger: card,\r\n\t\t\tstart: \"top 10%\",\r\n\t\t\tend: () => lastCardST.start + stickDistance,\r\n\t\t\tpin: true,\r\n\t\t\t// markers: true,\r\n\t\t\tpinSpacing: false,\r\n\t\t\tease: \"none\",\r\n\t\t\tanimation: scaleDown,\r\n\t\t\ttoggleActions: \"restart none none reverse\",\r\n\t\t});\r\n\r\n\t\tscrollTriggers.push(cardST);\r\n\t});\r\n}\r\n\r\n// Fonction pour détruire tous les ScrollTriggers\r\nfunction killScrollTriggers() {\r\n\tscrollTriggers.forEach((st) => st.kill());\r\n\tscrollTriggers = [];\r\n\r\n\t// Réinitialiser les styles inline des cartes\r\n\tcards.forEach((card) => {\r\n\t\tgsap.set(card, { clearProps: \"all\" });\r\n\t});\r\n}\r\n\r\n// Fonction pour gérer le responsive\r\nfunction handleResize() {\r\n\tconst isMobile = window.innerWidth < MOBILE_BREAKPOINT;\r\n\r\n\tif (isMobile) {\r\n\t\t// Sur mobile : détruire les ScrollTriggers\r\n\t\tkillScrollTriggers();\r\n\t} else {\r\n\t\t// Sur desktop : créer les ScrollTriggers s'ils n'existent pas\r\n\t\tif (scrollTriggers.length === 0) {\r\n\t\t\tinitScrollTriggers();\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Initialisation au chargement\r\nhandleResize();\r\n\r\n// Écouter les événements de resize avec debounce pour optimiser les performances\r\nlet resizeTimer;\r\nwindow.addEventListener(\"resize\", () => {\r\n\tclearTimeout(resizeTimer);\r\n\tresizeTimer = setTimeout(() => {\r\n\t\thandleResize();\r\n\t}, 250);\r\n});\r\n"],"names":["cards","gsap","utils","toArray","forEach","card","index","classList","add","MOBILE_BREAKPOINT","scrollTriggers","stickDistance","initScrollTriggers","killScrollTriggers","length","firstCardST","ScrollTrigger","create","trigger","start","push","lastCardST","scale","scaleDown","to","cardST","end","pin","pinSpacing","ease","animation","toggleActions","st","kill","set","clearProps","handleResize","isMobile","window","innerWidth","resizeTimer","addEventListener","clearTimeout","setTimeout"],"sourceRoot":""}
\ No newline at end of file
diff --git a/plugins/carhop-blocks/blocks/scroll-story-block/src/view.js b/plugins/carhop-blocks/blocks/scroll-story-block/src/view.js
index f99039d..9d1df58 100644
--- a/plugins/carhop-blocks/blocks/scroll-story-block/src/view.js
+++ b/plugins/carhop-blocks/blocks/scroll-story-block/src/view.js
@@ -9,34 +9,88 @@ cards.forEach((card, index) => {
}
});
+// Définir le breakpoint pour mobile/desktop (vous pouvez l'ajuster selon vos besoins)
+const MOBILE_BREAKPOINT = 768;
+
+let scrollTriggers = [];
let stickDistance = 0;
-let firstCardST = ScrollTrigger.create({
- trigger: cards[0],
- start: "top 10%",
-});
+// Fonction pour initialiser les ScrollTriggers (desktop)
+function initScrollTriggers() {
+ // Nettoyer d'abord les ScrollTriggers existants
+ killScrollTriggers();
-let lastCardST = ScrollTrigger.create({
- trigger: cards[cards.length - 1],
- start: "top 10%",
-});
+ if (cards.length === 0) return;
-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) + '"',
- });
-
- ScrollTrigger.create({
- trigger: card,
+ let firstCardST = ScrollTrigger.create({
+ trigger: cards[0],
start: "top 10%",
- end: () => lastCardST.start + stickDistance,
- pin: true,
- // markers: true,
- pinSpacing: false,
- ease: "none",
- animation: scaleDown,
- toggleActions: "restart none none reverse",
});
+ 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);
});