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){