feat: switch to lenis for smooth scroll

Author: kdotamoh

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "timber-starter-theme",
+  "name": "laurus-africa-theme",
   "version": "1.0.0",
   "main": "index.js",
   "author": "Kwadwo Amoh <kwadwo.amoh@gmail.com>",
@@ -17,7 +17,7 @@
     "debounce": "^2.1.0",
     "gsap": "^3.12.5",
     "laravel-vite-plugin": "^1.0.4",
-    "locomotive-scroll": "^5.0.0-beta.13",
+    "lenis": "^1.1.13",
     "modujs": "^1.4.2",
     "normalize.css": "^8.0.1"
   }

resources/scripts/modules.js

@@ -1,3 +1,3 @@
-// export { default as Scroll } from "./modules/Scroll";
+export { default as Scroll } from "./modules/Scroll";
 export { default as Menu } from "./modules/Menu";
 export { default as History } from "./modules/History";

resources/scripts/modules/Scroll.js

@@ -1,52 +1,36 @@
 import { module as Module } from "modujs";
-import LocomotiveScroll from "locomotive-scroll";
+import Lenis from "lenis";
+
+import { $html } from "../utils/dom";
 
 export default class extends Module {
   constructor(m) {
     super(m);
-
-    this.onScrollBind = this.onScroll.bind(this);
   }
 
   init() {
-    this.locomotiveScroll = new LocomotiveScroll({
-      modularInstance: this,
-      scrollCallback: this.onScrollBind,
+    this.$wrapper = this.el.parentNode;
+    this.lenis = new Lenis({
+      wrapper: this.$wrapper,
+      content: this.el,
+      smoothWheel: true,
+      duration: 1,
+      lerp: 0.3,
+      prevent: () => $html.classList.contains("has-menu-opened"),
     });
-  }
-
-  onScroll({ scroll, limit, velocity, direction, progress }) {
-    // Store our LS data on window to allow global access
-    window.locomotiveScrollData = {
-      scroll,
-      limit,
-      velocity,
-      direction,
-      progress,
-    };
-  }
-
-  /**
-   * Scroll to
-   *
-   * @param {object}
-   */
-  scrollTo(params) {
-    let { target, options } = params;
-
-    this.locomotiveScroll?.scrollTo(target, options);
-  }
+    window.scrollObjectInstance = this.lenis;
 
-  stop() {
-    this.locomotiveScroll?.stop();
+    this.raf(0);
   }
 
-  start() {
-    this.locomotiveScroll?.start();
+  raf(time) {
+    this.lenis.raf(time);
+    this.rafInstance = requestAnimationFrame((time) => this.raf(time));
   }
 
   destroy() {
     super.destroy();
-    this.locomotiveScroll?.destroy();
+    this.lenis?.destroy();
+    cancelAnimationFrame(this.rafInstance);
   }
 }

resources/styles/_document.scss

@@ -36,6 +36,7 @@
 
 html {
   height: 100%;
+  overflow: hidden;
 }
 
 body {

resources/styles/styles.scss

@@ -7,7 +7,7 @@
 
 // Vendors
 // ==========================================================================
-@import "../../node_modules/locomotive-scroll/dist/locomotive-scroll";
+@import "../../node_modules/lenis/dist/lenis.css";
 
 @import "overrides/wpcf7";
 

yarn.lock

@@ -242,11 +242,6 @@ braces@~3.0.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-clsx@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
-  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
-
 debounce@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-2.1.0.tgz#eab25eaf254b848fcfccffbde75bdaa44842caa3"
@@ -342,20 +337,12 @@ laravel-vite-plugin@^1.0.4:
     picocolors "^1.0.0"
     vite-plugin-full-reload "^1.1.0"
 
-lenis@1.0.45:
-  version "1.0.45"
-  resolved "https://registry.yarnpkg.com/lenis/-/lenis-1.0.45.tgz#5e34437527f30e10c87ada3c3c756c7c0caf8475"
-  integrity sha512-wiaYRxr7rK1rY+dhGdMLowV0rkjg+1B2nI50Igyu5USkjDY6lkBNCJi0mVaSL/X3ECyAm/oA0nsihq8ic3p9wg==
+lenis@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/lenis/-/lenis-1.1.13.tgz#4234c4ba302c211ddf0f0a21d73de99d5a78528b"
+  integrity sha512-iny+vWwUHcZGbJz+p2I75H1muLBRZqSG7t04jnhA+CWOQDFL1vt9bsZDwPPtYEmYVVvqAdo5MbXVFzNOlbgUkQ==
   dependencies:
     "@darkroom.engineering/tempus" "^0.0.46"
-    clsx "^2.1.0"
-
-locomotive-scroll@^5.0.0-beta.13:
-  version "5.0.0-beta.13"
-  resolved "https://registry.yarnpkg.com/locomotive-scroll/-/locomotive-scroll-5.0.0-beta.13.tgz#002c8a6d65caaf0e56e3607ad59f61fcba8c502e"
-  integrity sha512-zA4E6jbakBVwakb8KzTF6kVhdql1HCZbWCY0BzZ2LNNm9G5uWlZc9+Q5Lcxl7DmygY+5Yt1EfT5p3l3JLG8RPg==
-  dependencies:
-    lenis "1.0.45"
 
 modujs@^1.4.2:
   version "1.4.2"