project page title scale down on scroll

web/themes/custom/leshed/assets/js/main.js

@@ -41,13 +41,17 @@ gsap.registerPlugin(ScrollTrigger);
     const _is_front = drupalSettings.path.isFront
     console.log('drupalSettings', drupalSettings)
 
+    const scroller = document.querySelector('main[role="main"]');
+    const gsap_mm = gsap.matchMedia();
+    console.log('gsap_mm', gsap_mm);
 
     //  ___      _ _
     // |_ _|_ _ (_) |_
     //  | || ' \| |  _|
     // |___|_||_|_|\__|
     function init () {
-      console.log('LeShedTheme init()')
+      console.log('LeShedTheme init()');
+
       initTitles();
       initBurgerMenu();
       initSmoothScroll();
@@ -95,6 +99,44 @@ gsap.registerPlugin(ScrollTrigger);
           hyphenateWord(chars);
         }
       }
+
+      const pageTitle = document.querySelector('article.node-type-projet.view-mode-full h2.node-title');
+      console.log('pageTitle', pageTitle);
+
+
+      if (pageTitle) {
+        // needs requestAnimationFrame to get the real titleHeight after splitting
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+
+            const initTitleH = pageTitle.offsetHeight;
+            // console.log(`initTitleH: ${initTitleH}`);
+            const titleScaleTarget = 0.4;
+            const end = initTitleH - initTitleH * titleScaleTarget;
+            // console.log(`end: ${end}`);
+
+            gsap_mm.add('(min-width: 768px)', () => {
+                gsap.to(pageTitle, {
+                  scale: titleScaleTarget,
+                  y: end,
+                  ease: 'none',
+                  scrollTrigger: {
+                    scroller: scroller,
+                    start: 0,
+                    end: end, // scroll maximum du conteneur (robuste au resize)
+                    scrub: true,
+                    invalidateOnRefresh: true,
+                  },
+                });
+            })
+          });
+        });
+
+
+
+
+      }
+
     }
 
     /**
@@ -262,18 +304,14 @@ gsap.registerPlugin(ScrollTrigger);
     function initColumnScrollSync() {
       console.log('initColumnScrollSync');
 
-      const scroller = document.querySelector('main[role="main"]');
       const firstColumn = document.querySelector('.layout--twocol-section--50-50 .layout__region--first');
       const secondColumn = document.querySelector('.layout--twocol-section--50-50 .layout__region--second');
       console.log(scroller, firstColumn, secondColumn);
 
       if (!scroller || !firstColumn || !secondColumn) return;
 
-      const mm = gsap.matchMedia();
-      console.log(mm);
 
-
-      mm.add('(min-width: 768px)', () => {
+      gsap_mm.add('(min-width: 768px)', () => {
         [firstColumn, secondColumn].forEach((column) => {
           gsap.to(column, {
             // Distance à parcourir pour que le bas de la colonne arrive en
@@ -309,7 +347,7 @@ gsap.registerPlugin(ScrollTrigger);
     function initFsLightbox(){
       console.log('initFsLightbox');
       // console.log(window.FsLightbox);
-      let imgs_links = document.querySelectorAll('.field_images.multiple .field-item a');
+      let imgs_links = document.querySelectorAll('article.node-type-projet.view-mode-full .field_images.multiple .field-item a');
       for (const link of imgs_links) {
         link.setAttribute("data-fslightbox", "gallery")
       }