@widelab-nc/widelab 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widelab",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Widelab starter template based on Finsweet template + add-ons.",
   "homepage": "https://widelab.co",
   "license": "ISC",

package/src/index.js

@@ -2,10 +2,11 @@ import {initAlpine} from "./init";
 import Lenis from '@studio-freight/lenis';
 import gsap from 'gsap';
 import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { ScrollToPlugin } from "gsap/ScrollToPlugin";
 import { CustomEase } from "gsap/CustomEase";
 
 // GSAP plugins register and custom easing
-gsap.registerPlugin(ScrollTrigger, CustomEase);
+gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, CustomEase);
 function customGsapEasing() {
   CustomEase.create('loader', '0.83, 0, 0.17, 1');
   CustomEase.create('loader2', '0.77, 0, 0.175, 1');
@@ -13,13 +14,17 @@ function customGsapEasing() {
 
 // Functions definitions
 
-
 //Smooth scroll init
   const lenis = new Lenis({
     duration: 1.2,
     easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
   });
   function lenisScroll() {
+    lenis.on('scroll', ScrollTrigger.update);
+    gsap.ticker.add((time)=>{
+      lenis.raf(time * 1000)
+    })
+    gsap.ticker.lagSmoothing(0)
     function raf(time) {
       lenis.raf(time);
       requestAnimationFrame(raf);
@@ -49,23 +54,62 @@ function customGsapEasing() {
   }
 }
 
-// Reload page on browser back action
-function reloadOnBack() {
-  window.addEventListener('pageshow', function (event) {
-    if (event.persisted) {
-      window.location.reload();
-    }
-  });
-}
+  // Reload page on browser back action
+  function reloadOnBack() {
+    window.addEventListener('pageshow', function (event) {
+      if (event.persisted) {
+        window.location.reload();
+      }
+    });
+  }
 
-// Scroll disable
-function disableScrollMenu() {
-    const script = document.createElement('script');
-    script.src =
-      'https://cdn.jsdelivr.net/npm/@finsweet/attributes-scrolldisable@1/scrolldisable.js';
-    script.defer = true;
-    document.head.appendChild(script);
-}
+  // Scroll disable
+  function disableScrollMenu() {
+      const script = document.createElement('script');
+      script.src =
+        'https://cdn.jsdelivr.net/npm/@finsweet/attributes-scrolldisable@1/scrolldisable.js';
+      script.defer = true;
+      document.head.appendChild(script);
+  }
+
+  // Hero move to reveal footer
+  function revealFooter() {
+    gsap.to('#heroSection', {
+      scrollTrigger: {
+        trigger: '#bottomWrapper',
+        start: 'top bottom',
+        toggleActions: 'restart none none reverse',
+      },
+      y: '-100%',
+    });
+  }
+
+  // Page load animation
+  function loadingAnimation() {
+    const loaderAnimationIn = gsap.timeline({});
+    loaderAnimationIn
+      .add(function() {
+        history.scrollRestoration = 'manual';
+        lenis.scrollTo(0);
+      })
+      .add(function() {
+        lenis.stop();
+      });
+    loaderAnimationIn.to(
+      '.loader_ract',
+      {
+        delay: 0.2,
+        duration: 0.8,
+        width: 0,
+        ease: 'loader2',
+      },
+      '>'
+    );
+    loaderAnimationIn.add(function() {
+      lenis.start();
+    }, '>');
+    loaderAnimationIn.to('.loader_wrapper', { display: 'none', duration: 0.1 }, '>');
+  }
 
   // Place video inside the text
   window.videoInsideText = function(e)  {
@@ -91,12 +135,15 @@ window.Webflow.push(() => {
   console.log('The new code source is loaded!');
   initAlpine();
   lazyLoadVideos();
-  lenisScroll();
-  lenis.stop();
-  lenis.start();
+  if (Webflow.env("editor") === undefined) {
+    lenisScroll();
+  }
   customGsapEasing();
   reloadOnBack();
+  revealFooter();
+  loadingAnimation();
   if (window.innerWidth < 992) {
     disableScrollMenu();
   }
+
 });