first scroll effect with gsap scrollsmoother

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

@@ -1,10 +1,16 @@
 import { createApp } from 'vue'
 import '../scss/main.scss'
-import Etape from './vuejs/Etape.vue'
+import Content from './vuejs/Content.vue'
 
 import REST from './api/rest-axios'
 
+// import LocomotiveScroll from 'locomotive-scroll';
+// const scroll = new LocomotiveScroll();
 
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { ScrollSmoother } from "gsap/ScrollSmoother";
+gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
 // /**
 //  * @file
@@ -36,22 +42,37 @@ import REST from './api/rest-axios'
     // |___|_||_|_|\__|
     function init () {
       console.log('MathalloTheme init()')
+      initBgAnime()
       initVues()
     }
 
+    function initBgAnime(){
+      // gsap.to('body', {
+      //   scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport
+      //   backgroundPositionY: 10
+      // });
+      ScrollSmoother.create({
+        smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
+        effects: true, // looks for data-speed and data-lag attributes on elements
+        smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
+        wrapper: 'main[role="main"]',
+        content: 'main[role="main"]>.layout-content'
+      });
+    }
+
     function initVues(){
       console.log('initVues');
       
-      // initVueEtapeModale();
+      // initVueContent();
 
 
     }
 
-    // function initVueEtapeModale(){
-    //   createApp(Etape).mount('#etape-modale');
+    function initVueContent(){
+      createApp(Content).mount('main[role="main"]');
 
-    //   processEtapeLinks();
-    // }
+      // processEtapeLinks();
+    }
 
 
     // function onClickEtapeLink(e){

web_main/themes/custom/mathallo/assets/js/vuejs/Content.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    hello HMR TROP TROP BIEN \o/
+    hello HMR TROP TROP BIEN
   </div>
 </template>
 

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

@@ -14,22 +14,28 @@ body{
 }
 
 div.layout-container{
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
+  // display: flex;
+  // flex-direction: column;
+  // height: 100vh;
+  // overflow: hidden;
   header[role="banner"]{
     padding: 0.5em;
-    flex: 0 1 content; 
+    // flex: 0 1 content; 
     z-index: 100;
+    position: fixed;
+    top:0;
+    width: 100vw;
   }
   main[role="main"]{
-    flex: 1 1 auto; 
+    // flex: 1 1 auto; 
     overflow-y: scroll;
   }
   footer[role="contentinfo"]{
-    flex: 0 1 content; 
+    // flex: 0 1 content; 
     z-index: 100;
+    position: fixed;
+    bottom: 0;
+    width: 100vw;
   }
 }
 
@@ -80,16 +86,13 @@ header[role="banner"]{
 } // end of header[role="banner"]{
 
 main[role="main"]{
-  >div.layout-content{
+  div.layout-content{
     padding:5em 0;
     article{
       background-color: #fff;
       padding:2em;
       box-shadow: 0 0 10px rgba(0,0,0,0.25);
       max-width: 50em;
-      // position: absolute;
-      // top:25%;
-      // left: 25%;
       margin: 5em auto 0;
 
       h2{

web_main/themes/custom/mathallo/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.2",
+        "gsap": "^3.14.1",
         "vue": "^3.4.29"
       },
       "devDependencies": {
@@ -1012,6 +1013,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.1.tgz",
+      "integrity": "sha512-nOFRJpVu+U0IPgKzfC5MEdZrJ1iVidGaOuxK0+Un+7vMOHa5rw/SKOaMaRRyHZiJKaeAEALTBwnj6R3gifyGBw==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/immutable": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
@@ -1231,7 +1238,6 @@
       "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -1272,7 +1278,6 @@
       "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.39",
@@ -1328,7 +1333,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz",
       "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.4.31",
         "@vue/compiler-sfc": "3.4.31",

web_main/themes/custom/mathallo/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "gsap": "^3.14.1",
     "vue": "^3.4.29"
   },
   "devDependencies": {

web_main/themes/custom/mathallo/templates/page.html.twig

@@ -85,7 +85,6 @@
       </aside>
     {% endif %}
 
-    <div id="etape-modale"></div>
   </main>
 
   {% if page.footer %}