refactoring

web_main/themes/custom/mathallo/assets/js/main.js

@@ -35,7 +35,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
     console.log('drupalSettings', drupalSettings)
     
     // liste forme file names
-    const formesclasses = [
+    const _formesclasses = [
       'pyramide',
       'prct',
       'infinite',
@@ -48,9 +48,9 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       'cylindre'
     ]
 
-    let sizes = [];
+    // let _sizes = [];
 
-    let cardsForms = [];
+    let _cardsForms = [];
 
     //  ___      _ _
     // |_ _|_ _ (_) |_
@@ -95,7 +95,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
     }
 
     function onWindowResize() {
-      cardsForms.forEach(({card, forme, formepos}) => {
+      _cardsForms.forEach(({card, forme, formepos}) => {
         // console.log(`card`, card, 'forme', forme, 'formepos', formepos);
         forme.style.top = `${card.offsetTop + formepos.top}px`;
         forme.style.left = `${card.offsetLeft + formepos.left}px`;
@@ -106,13 +106,13 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
       // console.log('container', container);
 
-      // listes all available sizes
+      // listes all available _sizes
       // let min = 150;
-      // let increment = Math.round((350 / (formesclasses.length -1)));
+      // let increment = Math.round((350 / (_formesclasses.length -1)));
-      // for (let i = 0; i < formesclasses.length; i++) {
+      // for (let i = 0; i < _formesclasses.length; i++) {
-      //   sizes.push( min + increment * i)
+      //   _sizes.push( min + increment * i)
       // }
-      // console.log('sizes', sizes);
+      // console.log('_sizes', _sizes);
 
       let cards = document.querySelectorAll('article[role="home-presentation"], .field-card, .node-type-chapitre, .node-type-partie');
       // console.log('cards', cards);
@@ -126,112 +126,30 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
         // random forme
         // avoid duplicated formes
-        let n = Math.round(Math.random() * (formesclasses.length -1));
+        let n = Math.round(Math.random() * (_formesclasses.length -1));
         while (used_n.includes(n)) {
-          n = Math.round(Math.random() * (formesclasses.length -1));
+          n = Math.round(Math.random() * (_formesclasses.length -1));
         }
         used_n.push(n);
-        // console.log('n',n, 'class', formesclasses[n]);
+        // console.log('n',n, 'class', _formesclasses[n]);
 
         let forme = await createForme(card, n);
 
         container.prepend(forme);
 
+        // register forme
         cardFormObject.forme = forme;
-
         // register relative position of forme against card
         cardFormObject.formepos = {
           left: forme.offsetLeft - card.offsetLeft,
           top: forme.offsetTop - card.offsetTop
         }
-
         // register cards and formes
-        cardsForms.push(cardFormObject);
+        _cardsForms.push(cardFormObject);
-        // console.log('cardsForms', cardsForms);
+        // console.log('_cardsForms', _cardsForms);
         
-
+        // create GSAP animations
-        // Snap au centre de la fenêtre pour la card en utilisant le plugin Snap de GSAP
+        createGsapAnims(card, forme, oddeven);
-        // ScrollTrigger.create({
-        //   trigger: document.querySelector('.partie-principes-pratique'),
-        //   start: "top 60%",
-        //   end: "bottom 40%",
-        //   snap: {
-        //     snapTo: "top", // Snap au centre de la fenêtre
-        //     duration: {min: 0.2, max: 0.5}, // Durée de l'animation de snap
-        //     delay: 0, // Pas de délai
-        //     ease: "power3.out" // Type d'easing pour l'animation
-        //   }
-        // });
-        // Animation des cards au scroll
-        gsap.timeline({
-          scrollTrigger: {
-            trigger: card,
-            start: "top bottom",
-            end: "bottom top",
-            scrub: true,
-            ease: "power4.out",
-            snap: false,
-            // markers: true,
-          	// onToggle: (self) => {
-            //   console.log('card scroll toggled, self:', self)
-            // },
-          }
-        })
-        // cards opacity
-        .from(card.children, {
-          opacity: 0.4,
-        }, 0)
-        .to(card.children, {
-          opacity: 1,
-        }, 0.5)
-        .to(card.children, {
-          opacity: 0.4,
-        }, 0.7)
-        // cards mvmt
-        .from(card, {
-          translateX: `${200 * oddeven}px`,
-          translateY: `${100 * oddeven}px`
-        }, 0)
-        .to(card, {
-          translateX: "0",
-          translateY: "0"
-        }, 0.5);
-        // .to(card, {
-        //   translateX: `${200 * oddeven}px`,
-        // }, 0.9);
-
-
-        // Animation des formes continue de rotation + skew pendant tout le scroll
-        gsap.to(forme.querySelector('svg'), {
-          scrollTrigger: {
-            trigger: forme,
-            start: "top bottom",
-            end: "bottom top",
-            scrub: true,
-            ease: "power4.out"
-          },
-          rotation: Math.random() > 0.5 ? 45 : -45,
-          skewX: Math.random() > 0.5 ? 10 : -10
-        });
-
-        // Animation de couleur des formes uniquement au centre de l'écran
-        gsap.timeline({
-          scrollTrigger: {
-            trigger: card,
-            start: "top center", // Commence quand le haut de l'élément atteint le centre
-            end: "bottom center", // Termine quand le bas de l'élément passe le centre
-            scrub: true,
-            markers: false // Désactivez les marqueurs en production
-          }
-        })
-        .to(forme.querySelector('svg'), {
-          stroke: "#f661e2", // Passage au rose
-          duration: 0.1
-        }, 0.3) // Au milieu de la timeline (centre de l'écran)
-        .to(forme.querySelector('svg'), {
-          stroke: "#1642bc", // Retour au bleu
-          duration: 0.1
-        }, 0.7); // Juste après le centre
 
         // inverse oddeven
         oddeven*=-1;
@@ -241,16 +159,102 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       window.addEventListener('resize', onWindowResize);
     }
 
+    function createGsapAnims(card, forme, oddeven){
+
+      // Snap au centre de la fenêtre pour la card en utilisant le plugin Snap de GSAP
+      // ScrollTrigger.create({
+      //   trigger: document.querySelector('.partie-principes-pratique'),
+      //   start: "top 60%",
+      //   end: "bottom 40%",
+      //   snap: {
+      //     snapTo: "top", // Snap au centre de la fenêtre
+      //     duration: {min: 0.2, max: 0.5}, // Durée de l'animation de snap
+      //     delay: 0, // Pas de délai
+      //     ease: "power3.out" // Type d'easing pour l'animation
+      //   }
+      // });
+      // Animation des cards au scroll
+      gsap.timeline({
+        scrollTrigger: {
+          trigger: card,
+          start: "top bottom",
+          end: "bottom top",
+          scrub: true,
+          ease: "power4.out",
+          snap: false,
+          // markers: true,
+          // onToggle: (self) => {
+          //   console.log('card scroll toggled, self:', self)
+          // },
+        }
+      })
+      // cards opacity
+      .from(card.children, {
+        opacity: 0.4,
+      }, 0)
+      .to(card.children, {
+        opacity: 1,
+      }, 0.5)
+      .to(card.children, {
+        opacity: 0.4,
+      }, 0.7)
+      // cards mvmt
+      .from(card, {
+        translateX: `${200 * oddeven}px`,
+        translateY: `${100 * oddeven}px`
+      }, 0)
+      .to(card, {
+        translateX: "0",
+        translateY: "0"
+      }, 0.5);
+      // .to(card, {
+      //   translateX: `${200 * oddeven}px`,
+      // }, 0.9);
+
+
+      // Animation des formes continue de rotation + skew pendant tout le scroll
+      gsap.to(forme.querySelector('svg'), {
+        scrollTrigger: {
+          trigger: forme,
+          start: "top bottom",
+          end: "bottom top",
+          scrub: true,
+          ease: "power4.out"
+        },
+        rotation: Math.random() > 0.5 ? 45 : -45,
+        skewX: Math.random() > 0.5 ? 10 : -10
+      });
+
+      // Animation de couleur des formes uniquement au centre de l'écran
+      gsap.timeline({
+        scrollTrigger: {
+          trigger: card,
+          start: "top center", // Commence quand le haut de l'élément atteint le centre
+          end: "bottom center", // Termine quand le bas de l'élément passe le centre
+          scrub: true,
+          markers: false // Désactivez les marqueurs en production
+        }
+      })
+      .to(forme.querySelector('svg'), {
+        stroke: "#f661e2", // Passage au rose
+        duration: 0.1
+      }, 0.3) // Au milieu de la timeline (centre de l'écran)
+      .to(forme.querySelector('svg'), {
+        stroke: "#1642bc", // Retour au bleu
+        duration: 0.1
+      }, 0.7); // Juste après le centre
+
+    }
 
     async function createForme(card, n){
         let forme = document.createElement('div');
         forme.classList.add('bg-forme');
 
         
-        // forme.classList.add(formesclasses[n]);
+        // forme.classList.add(_formesclasses[n]);
 
         // inject svg from file
-        const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${formesclasses[n]}.svg`)
+        const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${_formesclasses[n]}.svg`)
         const svgText = await response.text();
         forme.innerHTML = svgText;
 
@@ -261,7 +265,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
         let wh = 200 + Math.random()*300;
         // OR
         // pic a size
-        // let wh = sizes.splice(Math.floor(Math.random() * sizes.length), 1)[0];
+        // let wh = _sizes.splice(Math.floor(Math.random() * _sizes.length), 1)[0];
         // record the original scale for stroke width rescalling  
         const init_wh = svgNode.getAttribute('width');
         // set the new size