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,7 +86,7 @@ header[role="banner"]{
 } // end of header[role="banner"]{
 
 main[role="main"]{
-  >div.layout-content{
+  div.layout-content{
     padding:5em 0;
     article{
       background-color: #fff;