@widelab-nc/widelab 1.0.14 → 1.0.15

package/src/index.js

@@ -6,10 +6,11 @@ import { ScrollToPlugin } from "gsap/ScrollToPlugin";
 import { CustomEase } from "gsap/CustomEase";
 import { SplitText } from "gsap/SplitText";
 import Splide from '@splidejs/splide';
+import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
 
 
 // GSAP plugins register and custom easing
-gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, CustomEase, SplitText);
+gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, CustomEase, SplitText, DrawSVGPlugin);
 function customGsapEasing() {
   CustomEase.create('loader', '0.83, 0, 0.17, 1');
   CustomEase.create('loader2', '0.77, 0, 0.175, 1');
@@ -99,7 +100,7 @@ function customGsapEasing() {
       '.loader_ract',
       {
         delay: 0.2,
-        duration: 0.8,
+        duration: 0.5,
         width: 0,
         ease: 'loader2',
       },
@@ -257,7 +258,8 @@ function customGsapEasing() {
   }
 
   // Case study mask animation
-  window.caseStudyMaskAnimation = function(e) {
+  window.caseStudyInteraction = function(e) {
+    // Video mask animation
       const mask = e.querySelector('.portfolio_item_image-mask');
       const maskAnimation = gsap.from(mask, {
         width: '100%',
@@ -271,6 +273,36 @@ function customGsapEasing() {
         start: 'top 80%',
         onEnter: () => maskAnimation.play(),
       });
+
+      // Video on hover actions
+      const videoElements = e.getElementsByTagName('video');
+      if (window.innerWidth > 992) {
+        const videoElement = videoElements.length > 0 ? videoElements[0] : null;
+        if (!videoElement) return;
+
+        videoElement.addEventListener('loadeddata', () => {
+            videoElement.pause();
+        });
+        e.addEventListener('mouseenter', hoverIN, false);
+        e.addEventListener('mouseleave', hoverOUT, false);
+
+        function hoverIN() {
+          videoElement.play();
+        }
+
+        function hoverOUT() {
+            videoElement.pause();
+            //videoElement.currentTime = 0;
+        }
+    } else {
+        videoElements.forEach((videoElem) => {
+        const poster = videoElem.getAttribute('poster');
+        videoElem.innerHTML = '';
+        videoElem.setAttribute('poster', poster);
+        videoElem.load();
+        videoElem.pause();
+      });
+    }
   }
 
   // Reviews slider
@@ -312,83 +344,385 @@ function customGsapEasing() {
         reviewsSplide.go('+1');
       });
     }
+
+    // Animation in
+    gsap.from(e, {
+      scrollTrigger: {
+        trigger: e,
+        start: 'top bottom',
+        end: 'bottom bottom-=15%',
+        scrub: 1,
+        once: true,
+      },
+      x: '10%',
+      opacity: 0,
+      ease: 'linear',
+    });
   }
 
-// Facts slider
-window.factsSlider = function(e) {
-  // Facts slider splide initialize
-  const factsSplide = new Splide(e, {
-    type: 'loop',
-    perPage: 1,
-    gap: 0,
-    arrows: false,
-    drag: false,
-    duration: 0.15,
-    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
-    classes: {
-      pagination: 'splide__pagination facts-pagination',
-      page: 'splide__pagination__page facts-page',
-    },
-    breakpoints: {
-      992: { gap: '1.75rem', drag: true },
-      480: { gap: '1.375rem' },
-    },
-  }).mount();
-  // Next on click
-  if (window.innerWidth > 992) {
-    factsSplide.on('click', function () {
-      factsSplide.go('+1');
+  // Facts slider
+  window.factsSlider = function(e) {
+    // Facts slider splide initialize
+    const factsSplide = new Splide(e, {
+      type: 'loop',
+      perPage: 1,
+      gap: 0,
+      arrows: false,
+      drag: false,
+      duration: 0.15,
+      easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+      classes: {
+        pagination: 'splide__pagination facts-pagination',
+        page: 'splide__pagination__page facts-page',
+      },
+      breakpoints: {
+        992: { gap: '1.75rem', drag: true },
+        480: { gap: '1.375rem' },
+      },
+    }).mount();
+    // Next on click
+    if (window.innerWidth > 992) {
+      factsSplide.on('click', function () {
+        factsSplide.go('+1');
+      });
+    }
+    const externalLink = e.querySelectorAll('.external_link.is-cursor');
+    // Loop through each element and execute customCursorIn.reverse()
+    externalLink.forEach((link) => {
+      link.addEventListener('click', () => {
+        event.stopPropagation();
+      });
     });
   }
-  const externalLink = e.querySelectorAll('.external_link.is-cursor');
-  // Loop through each element and execute customCursorIn.reverse()
-  externalLink.forEach((link) => {
-    link.addEventListener('click', () => {
-      event.stopPropagation();
+
+  // Team slider
+  window.teamSlider = function(e) {
+    new Splide(e, {
+      type: 'slide',
+      fixedWidth: '20%',
+      padding: { left: '2.5rem', right: 0 },
+      focus: 0,
+      gap: 0,
+      pagination: false,
+      omitEnd: true,
+      arrows: false,
+      drag: true,
+      easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+      snap: true,
+      classes: {
+        pagination: 'splide__pagination facts-pagination',
+        page: 'splide__pagination__page facts-page',
+      },
+      breakpoints: {
+        992: { fixedWidth: '40%', padding: { left: '1.75rem' }, drag: 'free', snap: false },
+        560: { fixedWidth: '75%', padding: { left: '1.375rem' }, drag: 'free', snap: false },
+      },
+    }).mount();
+
+    // Randomize order of slides
+    const teamList = e.querySelector('.team_collection_list');
+    const teamItems = Array.from(teamList.children);
+    teamItems.sort(function () {
+      return 0.5 - Math.random();
+    });
+    teamItems.forEach(function (item) {
+      teamList.appendChild(item);
     });
-  });
-}
 
-// Team slider
-window.teamSlider = function(e) {
-  new Splide(e, {
-    type: 'slide',
-    fixedWidth: '20%',
-    padding: { left: '2.5rem', right: 0 },
-    focus: 0,
-    gap: 0,
-    pagination: false,
-    omitEnd: true,
-    arrows: false,
-    drag: true,
-    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
-    snap: true,
-    classes: {
-      pagination: 'splide__pagination facts-pagination',
-      page: 'splide__pagination__page facts-page',
-    },
-    breakpoints: {
-      992: { fixedWidth: '40%', padding: { left: '1.75rem' }, drag: 'free', snap: false },
-      560: { fixedWidth: '75%', padding: { left: '1.375rem' }, drag: 'free', snap: false },
-    },
-  }).mount();
-}
+    // Animation in
+    gsap.from(e, {
+      scrollTrigger: {
+        trigger: e,
+        start: 'top bottom',
+        end: 'bottom bottom',
+        scrub: 1,
+        once: true,
+      },
+      x: '10%',
+      opacity: 0,
+      ease: 'linear',
+    });
+  }
+
+  // Element padding change on scroll
+  window.elementPaddingChange = function(e) {
+    gsap.to(e, {
+      scrollTrigger: {
+        trigger: e,
+        start: 'top bottom',
+        end: 'top top',
+        toggleActions: 'restart none none reverse',
+        scrub: 1,
+      },
+      paddingLeft: '0rem',
+      paddingRight: '0rem',
+      ease: 'linear',
+    });
+  }
+
+  // Section bg change
+  window.sectionBgChange = function(e) {
+    gsap.set(e, { backgroundColor: '#fff' });
+    gsap.set('#heroNavbarLottie path', { fill: 'rgb(21, 21, 21)' });
+      const sectionsBgChange = gsap.timeline({
+        duration: 0.3,
+        ease: 'loader2',
+        scrollTrigger: {
+          trigger: e,
+          start: 'top bottom',
+          end: 'bottom top',
+          toggleActions: 'play reverse play reverse',
+        },
+      });
+      sectionsBgChange.to(['#skills', '#portfolio'], {
+        backgroundColor: '#151515',
+      });
+      // Change navbar element on bg animation
+      sectionsBgChange.to(
+        [
+          '.button_small',
+          '.button_small_icon',
+          '.navbar_brand_svg',
+          '#heroNavbarLottie path ',
+        ],
+        {
+          color: '#fff',
+          fill: 'rgb(254, 254, 254)',
+        },
+        '<'
+      );
+    if (window.innerWidth > 992) {
+      sectionsBgChange.to(
+          '.navbar_menu_link',
+        {
+          color: '#fff',
+          fill: 'rgb(254, 254, 254)',
+        },
+        '<'
+      );
+    }
+    }
+
+  // Client logos animation
+  window.clientLogosAnimation = function(e) {
+    const logosStagger = 0.15;
+    const logoMask = e.querySelectorAll('[class*="item_mask"]');
+    const logoImg = e.querySelectorAll('[class*="image"]');
+    gsap.from(logoMask, {
+      scrollTrigger: {
+        trigger: logoMask,
+        start: 'top bottom-=25%',
+      },
+      width: '0%',
+      duration: 0.7,
+      ease: 'loader2',
+      stagger: logosStagger,
+    });
+    gsap.from(logoImg, {
+      scrollTrigger: {
+        trigger: logoMask,
+        start: 'top bottom-=25%',
+      },
+      opacity: 0,
+      delay: 0.4,
+      duration: 0.45,
+      ease: 'loader2',
+      stagger: logosStagger,
+    });
+  }
+
+  // Hero span video on hover
+  window.heroSpanVideoOnHover = function(e) {
+    window.customCursorText(e);
+    const heroSpanContentAnimation = gsap.timeline({ paused: true, ease: 'loader2' });
+    heroSpanContentAnimation.to('.hero-line-mask', { clipPath: 'none', duration: 0.05 }, '>');
+    heroSpanContentAnimation.to(e, { scale: 2, duration: 0.35 }, '>');
+      if (window.innerWidth > 992) {
+        e.addEventListener('mouseenter', () => {
+          heroSpanContentAnimation.timeScale(1).play();
+        });
+        e.addEventListener('mouseleave', () => {
+          heroSpanContentAnimation.timeScale(2).reverse();
+        });
+      }
+  }
+
+  // Reel modal
+  window.reelModal = function() {
+      const reelTrigger = document.querySelectorAll('[wideClick="playReel"]');
+      const reelModal = document.querySelector('.reel-modal');
+      const reelModalPlayer = document.getElementById('fullReel');
+      const reelPlayback = 0;
+      const reelModalShow = gsap.timeline({ ease: 'loader2', paused: true });
+      reelModalShow.to(reelModal, { display: 'flex', opacity: 0, duration: 0 });
+      reelModalShow.to(reelModal, { opacity: 1, duration: 0.6 }, '>');
+      if (window.innerWidth > 992) {
+        reelTrigger.forEach((element) => {
+          element.addEventListener('click', () => {
+            lenis.stop();
+            reelModalShow.timeScale(1).play();
+            // Set the video source based on whether the player can handle WebM
+            if (reelPlayback === 0) {
+              if (reelModalPlayer.canPlayType('video/webm')) {
+                reelModalPlayer.src =
+                  'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.webm';
+              } else {
+                reelModalPlayer.src =
+                  'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.mp4';
+              }
+              // Load the video
+              reelModalPlayer.load();
+            } else {
+              return;
+            }
+
+            reelModalPlayer.play();
+          });
+        });
+        reelModal.addEventListener('click', () => {
+          reelModalShow.timeScale(4).reverse();
+          reelModalPlayer.pause();
+          lenis.start();
+        });
+        window.addEventListener('keydown', function (event) {
+          // The key code for the ESC key is 27
+          if (event.keyCode === 27) {
+            reelModalShow.timeScale(4).reverse();
+            reelModalPlayer.pause();
+            lenis.start();
+          }
+        });
+      } else {
+        reelTrigger.forEach((element) => {
+          element.addEventListener('click', () => {
+            // Set the video source based on whether the player can handle WebM
+            if (reelModalPlayer.canPlayType('video/webm')) {
+              reelModalPlayer.src = 'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.webm';
+            } else {
+              reelModalPlayer.src = 'https://widelabco.sfo3.cdn.digitaloceanspaces.com/Widelab-reel.mp4';
+            }
+
+            // Load the video
+            reelModalPlayer.load();
+
+            // Add a listener to the 'canplaythrough' event
+            reelModalPlayer.addEventListener(
+              'canplaythrough',
+              () => {
+                // Once there's enough data loaded to play through, start playback
+                reelModalPlayer.play();
+              },
+              { once: true }
+            ); // Ensure this event only fires once per click
+          });
+        });
+        reelModal.addEventListener('click', () => {
+          reelModalPlayer.pause();
+        });
+      }
+  }
+
+  // Founders tooltip
+  window.foundersTooltip = function(e) {
+    const line = e.querySelector('.line');
+    const arrow = e.querySelector('.arrow');
+    const foundersHover = gsap.timeline({ paused: true, ease: 'loader2' });
+    foundersHover.from(e, {
+      x: '5%',
+      opacity: 0,
+      duration: 0.4,
+    });
+    foundersHover.from(
+      line,
+      {
+        drawSVG: '0% 0%',
+        duration: 0.2,
+      },
+      '>-0.2'
+    );
+    foundersHover.from(arrow, {
+      drawSVG: '0% 0%',
+      duration: 0.15,
+    }),
+      '>';
+      if (window.innerWidth > 992) {
+        e.addEventListener('mouseenter', () => {
+          foundersHover.timeScale(1).play();
+        });
+        e.addEventListener('mouseleave', () => {
+          foundersHover.timeScale(3).reverse();
+        });
+      }
+  }
+
+  // Clients map actions
+  window.clientsMapActions = function(e) {
+    // Map animation
+    const mapAnimation = gsap.timeline({
+      scrollTrigger: {
+        trigger: '.reviews_map_base',
+        start: 'bottom-=160px bottom',
+      },
+    });
+    mapAnimation.from('.map-point', {
+      duration: 1,
+      opacity: 0,
+      stagger: 0.1,
+      ease: 'loader2',
+    });
+    mapAnimation.from(
+      '.map-pin_wrapper',
+      {
+        duration: 1,
+        opacity: 0,
+        stagger: 0.1,
+        ease: 'loader2',
+      },
+      '0.3'
+    );
+
+// Map pins animation on hover
+    const allMapPins = document.querySelectorAll('.map-pin_wrapper');
+    allMapPins.forEach(function (element) {
+      element.addEventListener('mouseenter', function () {
+        const mapPin = this.getAttribute('w-map-pin');
+        const oldPin = document.querySelectorAll('.map_info-collection-item');
+        const infoElements = document.querySelectorAll(
+          ".map_info-collection-item[w-map-info='" + mapPin + "']"
+        );
+        const infoElementsAppear = gsap.timeline({});
+        infoElementsAppear.to(oldPin, {
+          opacity: 0,
+          ease: 'loader2',
+          duration: 0.1,
+        });
+        infoElementsAppear.to(oldPin, {
+          display: 'none',
+          duration: 0.01,
+        });
+        infoElementsAppear.to(infoElements, {
+          display: 'block',
+          duration: 0.01,
+        });
+        infoElementsAppear.to(infoElements, {
+          opacity: 1,
+          ease: 'loader2',
+          duration: 0.2,
+        });
+      });
+    });
+// Map boxes link special code
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const elements = document.querySelectorAll('.map_info-wrapper');
+      for (let i = 0; i < elements.length; i++) {
+        const href = elements[i].getAttribute('href');
+        if (href && href.length > 3) {
+          elements[i].style.cursor = 'pointer';
+        }
+      }
+    });
+  }
 
-// Element padding change on scroll
-window.elementPaddingChange = function(e) {
-  gsap.to(e, {
-    scrollTrigger: {
-      trigger: e,
-      start: 'top bottom',
-      end: 'top top',
-      toggleActions: 'restart none none reverse',
-      scrub: 1,
-    },
-    paddingLeft: '0rem',
-    paddingRight: '0rem',
-    ease: 'linear',
-  });
-}
 
   // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
   window.Webflow ||= [];
@@ -413,5 +747,4 @@ window.elementPaddingChange = function(e) {
     if (window.innerWidth < 992) {
       disableScrollMenu();
     }
-
   });