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")
       }

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

@@ -46,13 +46,16 @@ div.layout-container{
   max-width:1080px;
   margin: 0 auto;
   header[role="banner"]{
+    display: block;
+    position: relative;
     padding: 0.5em 0;
-    flex: 0 1 content;
+    flex: 1 1 $header_height;
     z-index: 100;
     // position: fixed;
     // top:0;
     // width: 100%;
     height: $header_height;
+    min-height: $header_height;
   }
   main[role="main"]{
     flex: 1 1 auto;
@@ -95,7 +98,7 @@ header[role="banner"]{
       text-decoration: none;
       font-size: 2em;
       font-weight: 500;
-
+      margin-right: 0.5em;
       // &:hover{
       //   color: $rose;
       // }
@@ -116,7 +119,7 @@ header[role="banner"]{
       &, &::before, &::after{
         // position: absolute;
         width:20px; height:3px;
-        background-color: red;
+        background-color: #000;
 
       }
       &:hover{
@@ -279,12 +282,17 @@ article.node-type-projet.view-mode-full{
     // column-gap: 2em;
     div.col{
       flex:0 0 calc(50% - $colsgap / 2);
-      // max-width: 48%;
+      max-width: calc(50% - $colsgap / 2);
 
       &.left{
-        >h2{
+        >h2.node-title{
+          position: relative;
           font-size: 12em;
           margin: 0;
+          z-index: 100;
+          width: 205%;//calc(50% - $colsgap / 2);
+          pointer-events: none;
+          transform-origin: 0 0;
         }
 
         .field_artiste_s_invite_s{
@@ -366,6 +374,7 @@ article.node-type-projet.view-mode-full{
               transition: opacity 0.3s ease-in-out;
             }
             &:hover{
+              z-index:200;
               blockquote.image-field-caption{
                 opacity: 1;
               }

web/themes/custom/leshed/assets/scss/partials/variables.scss

@@ -1,3 +1,3 @@
 $default_fwght: 200;
-$header_height: 50px;
+$header_height: 70px;
 $colsgap: 2em;

web/themes/custom/leshed/templates/node--projet--full.html.twig

@@ -66,7 +66,7 @@
 
     <div class="cols">
       <div class="col left">
-        <h2{{ title_attributes }}>
+        <h2{{ title_attributes.addClass('node-title') }}>
           {{ label }}
         </h2>
         {{ content|without('field_images') }}