@widelab-nc/widelab 1.0.1 → 1.0.2

package/src/index.js

@@ -1,13 +1,975 @@
 import {initAlpine} from "./init";
+import Lenis from '@studio-freight/lenis';
+import { gsap } from 'gsap';
+import { CustomEase } from 'gsap/CustomEase';
+import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { SplitText } from 'gsap/SplitText';
+import lozad from 'lozad';
+import Splide from '@splidejs/splide';
+import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
+
+// Register GSAP plugins
+gsap.registerPlugin(DrawSVGPlugin, ScrollTrigger, SplitText, CustomEase, ScrollToPlugin);
+
+// Define smooth scroll
+  const lenis = new Lenis({
+    duration: 1.2,
+    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))
+  });
+
+// Lenis scroll start function
+function lenisScroll() {
+    function raf(time) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+    requestAnimationFrame(raf);
+  }
+
+  // Lazy load library init
+function lazyLoad() {
+  const observer = lozad('img, video:not(#fullReel)', {
+    loaded: function (el) {
+      // Custom code to run when an image or video is loaded
+    },
+  });
+  observer.observe();
+}
+
+  // Custom ease for GSAP
+function customGsapEasing(){
+  CustomEase.create('loader', '0.83, 0, 0.17, 1');
+  CustomEase.create('loader2', '0.77, 0, 0.175, 1');
+}
+
+// Reload page on browser back action
+function reloadOnBack() {
+  window.addEventListener('pageshow', function (event) {
+    if (event.persisted) {
+      window.location.reload();
+    }
+  });
+}
+
+// Page load animation
+  const loaderAnimationIn = gsap.timeline({});
+  loaderAnimationIn.add(function() {
+    history.scrollRestoration = 'manual';
+    gsap.to(window, { duration: 0.05, scrollTo: 0 });
+    lenis.scrollTo(0);
+  });
+  loaderAnimationIn.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 }, '>');
+
+// Page transition animation
+function transitionLinksRule() {
+  const transitionLinks = document.querySelectorAll(
+    'a:not([href^="#"]):not([href^="javascript:"]):not([href=""]):not([href^="mailto:"]):not([href^="tel:"])'
+  );
+  transitionLinks.forEach((link) => {
+    if (link.getAttribute('target') !== '_blank') {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+
+        const loaderAnimationOut = gsap.timeline({
+          onComplete: () => {
+            window.location.href = link.href;
+          },
+        });
+        loaderAnimationOut.to('.unloader_wrapper', { display: 'flex', duration: 0.05 });
+        loaderAnimationOut.from('.unloader_ract', {
+          duration: 0.4,
+          width: '0%',
+          ease: 'loader2',
+        }),
+          '>';
+        // play the timeline
+        loaderAnimationOut.play();
+      });
+    }
+  });
+}
+
+// Reset loader display on screen resize
+function onScreenResize() {
+  window.addEventListener('resize', function () {
+    setTimeout(function () {
+      gsap.set('.loader_wrapper', { display: 'none' });
+    }, 50);
+  });
+}
+
+// Hero move to reveal footer
+function revealFooter() {
+  gsap.to('#heroSection', {
+    scrollTrigger: {
+      trigger: '#bottomWrapper',
+      start: 'top bottom',
+      toggleActions: 'restart none none reverse',
+    },
+    y: '-100%',
+  });
+}
+
+// Custom cursor on mousedown and mouse up
+function customCursorOnClick() {
+  const cursorElements = document.querySelectorAll('[wide="customCursor"]');
+  const customCursor = document.querySelector('.custom_cursor');
+  cursorElements.forEach((element) => {
+    element.addEventListener('mousedown', function () {
+      customCursor.style.transform = 'scale3d(0.8, 0.8, 1)';
+    });
+    element.addEventListener('mouseup', function () {
+      customCursor.style.transform = 'scale3d(1, 1, 1)';
+    });
+  });
+}
+
+// Custom cursor copy change on hover
+function customCursorChangeCopy() {
+  document.addEventListener('DOMContentLoaded', function () {
+    const customCursorElements = document.querySelectorAll('[wideCursorText]');
+    customCursorElements.forEach(function (element) {
+      element.addEventListener('mouseenter', () => {
+        const wideCursorTextValue = element.getAttribute('wideCursorText');
+        const customCursorTextElement = document.querySelector('.custom_cursor_text');
+        customCursorTextElement.innerHTML = wideCursorTextValue;
+      });
+    });
+  });
+}
+
+// Header animations
+const showHideHeader = gsap.from('.navbar', {
+    y: '-100%',
+    paused: true,
+    duration: 0.2,
+    ease: 'loader2',
+  })
+  .progress(1);
+
+// Header animation on scroll
+function headeronScroll() {
+  ScrollTrigger.create({
+    start: 'top top',
+    endTrigger: '.bottom-wrapper',
+    end: 'bottom top+=100px',
+    onUpdate: (self) => {
+      self.direction === -1 ? showHideHeader.play() : showHideHeader.reverse();
+    },
+  });
+}
+
+// Page load animation
+const homeLoadAnimation = gsap.timeline({}),
+  homeHeroHeading = new SplitText('#homeHeroHeading', {
+    type: 'lines',
+    linesClass: 'hero-line',
+  }),
+  homeHeroHeadingMask = new SplitText('#homeHeroHeading', {
+    type: 'lines',
+    linesClass: 'hero-line-mask',
+  });
+homeLoadAnimation.add(loaderAnimationIn.play());
+homeLoadAnimation.from('.navbar', {
+  opacity: 0,
+  duration: 0.6,
+  ease: 'loader2',
+}),
+  '>-2';
+homeLoadAnimation.from(
+  '.hero-line',
+  {
+    duration: 1.2,
+    y: '100%',
+    stagger: 0.2,
+    ease: 'loader2',
+  },
+  '>-0.5'
+);
+homeLoadAnimation.to(
+  '.hero_headline_ract-mask',
+  {
+    width: '0%',
+    duration: 0.6,
+    ease: 'loader2',
+  },
+  '>-0.6'
+);
+homeLoadAnimation.from(
+  '#heroSubtitle',
+  {
+    opacity: 0,
+    duration: 1,
+    ease: 'loader2',
+  },
+  '>-0.4'
+);
+
+// Stats section healdine animation
+const statsHeadlineAnimation = gsap.timeline({
+    scrollTrigger: {
+      trigger: '#statsKnow',
+      start: 'center center',
+      toggleActions: 'restart none none reverse',
+      end: '+=500',
+    },
+    pause: 'paused',
+    ease: 'defaultEase',
+  }),
+  homeStatsHeading = new SplitText('#statsDone', {
+    type: 'lines',
+    linesClass: 'stats-line',
+  }),
+  homeStatsHeadingMask = new SplitText('#statsDone', {
+    type: 'lines',
+    linesClass: 'stats-line-mask',
+  });
+statsHeadlineAnimation.to(
+  '#statsKnow',
+  {
+    duration: 0.5,
+    opacity: 0,
+    display: 'none',
+  },
+  '>'
+);
+statsHeadlineAnimation.from('.stats-line', {
+  duration: 0.5,
+  opacity: 0,
+  y: '100%',
+  stagger: 0.25,
+});
+
+// Place the elements inside the H1 span for home hero section
+const heroHeadlineContent = document.querySelector('.hero_headline-span.copy-this');
+const heroHeadlineSpan = document.querySelector('.hero_headline-span');
+heroHeadlineSpan.appendChild(heroHeadlineContent);
+
+// Place the elements inside the H2 span for home reviews section
+const reviewsHeadlineContent = document.querySelector('.reviews_headline-span.copy-this');
+const reviewsHeadlineSpan = document.querySelector('.reviews_headline-span');
+reviewsHeadlineSpan.appendChild(reviewsHeadlineContent);
+
+// Place the elements inside the H2 span for home start section
+const startHeadlineContent = document.querySelector('.start_headline-span.copy-this');
+const startHeadlineSpan = document.querySelector('.start_headline-span');
+startHeadlineSpan.appendChild(startHeadlineContent);
+
+// Case study images mask animation
+const csImageMasks = document.querySelectorAll('.portfolio_item_image-mask');
+csImageMasks.forEach((mask) => {
+  const maskAnimation = gsap.from(mask, {
+    width: '100%',
+    duration: 0.72,
+    ease: 'loader2',
+    paused: true,
+  });
+  ScrollTrigger.create({
+    animation: maskAnimation,
+    trigger: mask,
+    start: 'top 80%',
+    onEnter: () => maskAnimation.play(),
+  });
+});
+
+  // Reviews slider
+  // Put content of static slide into list
+  const staticContent = document.querySelector(
+    '.splide__slide.reviews_collection_item.is-static'
+  ).innerHTML;
+  const dynamicElement = document.querySelector('.reviews_collection_item');
+  dynamicElement.innerHTML = staticContent;
+  dynamicElement.classList.add('is-static');
+
+  // Reviews slider splide initialize
+  new Splide('#reviewsSlider', {
+    type: 'slide',
+    fixedWidth: '24.5rem',
+    focus: 0,
+    padding: { left: '2.5rem', right: 0 },
+    gap: 0,
+    omitEnd: true,
+    arrows: false,
+    drag: true,
+    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+    snap: true,
+    classes: {
+      pagination: 'splide__pagination reviews-pagination',
+      page: 'splide__pagination__page reviews-page',
+    },
+    breakpoints: {
+      992: { fixedWidth: '17.438rem', padding: { left: '1.75rem' }, drag: 'free', snap: false },
+      480: { fixedWidth: '16.25rem', padding: { left: '1.375rem' }, drag: 'free', snap: false },
+    },
+  }).mount();
+
+  // Facts slider splide initialize
+  const factsSplide = new Splide('#factsSlider', {
+    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 = document.querySelectorAll('.external_link.is-cursor');
+  // Loop through each element and execute customCursorIn.reverse()
+  externalLink.forEach((link) => {
+    link.addEventListener('click', () => {
+      event.stopPropagation();
+    });
+  });
+  factsSplide.on('move ', (newIndex) => {
+    if (newIndex === 0) {
+      document.querySelector('.facts-slide_diagram-trigger.is-0').click();
+    } else if (newIndex === 1) {
+      document.querySelector('.facts-slide_diagram-trigger.is-1').click();
+    } else if (newIndex === 2) {
+      document.querySelector('.facts-slide_diagram-trigger.is-2').click();
+    }
+  });
+
+  ScrollTrigger.create({
+    trigger: '.section.is-facts',
+    start: 'top bottom',
+    once: true,
+    onToggle: () => {
+      document.querySelector('.facts-slide_diagram-trigger.is-0').click();
+    },
+  });
+
+  // Team slider splide initialize
+  new Splide('#teamSlider', {
+    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();
+
+// Reel video padding animation
+gsap.to('#reelPrevSection', {
+  scrollTrigger: {
+    trigger: '#reelPrevSection',
+    start: 'top bottom',
+    end: 'top top',
+    toggleActions: 'restart none none reverse',
+    scrub: 1,
+  },
+  paddingLeft: '0rem',
+  paddingRight: '0rem',
+  ease: 'linear',
+});
+
+// Big team image padding animation
+gsap.to('.team_big-image_wrapper', {
+  scrollTrigger: {
+    trigger: '.team_big-image_wrapper',
+    start: 'top bottom',
+    end: 'top top',
+    toggleActions: 'restart none none reverse',
+    scrub: 1,
+  },
+  paddingLeft: '0rem',
+  paddingRight: '0rem',
+  ease: 'linear',
+});
+
+// Sections bg animation
+
+window.addEventListener('load', function () {
+  gsap.set('.section.is-skills', { backgroundColor: '#fff' });
+  gsap.set('#heroNavbarLottie path', { fill: 'rgb(21, 21, 21)' });
+  if (window.innerWidth > 992) {
+    const sectionsBgChange = gsap.timeline({
+      duration: 0.2,
+      ease: 'loader2',
+      scrollTrigger: {
+        trigger: '.section.is-skills',
+        start: 'top bottom',
+        end: 'bottom top',
+        toggleActions: 'restart reverse restart reverse',
+      },
+    });
+    sectionsBgChange.to(['#skills', '#portfolio'], {
+      backgroundColor: '#151515',
+    });
+    // Change navbar element on bg animation
+    sectionsBgChange.to(
+      [
+        '.navbar_menu_link',
+        '.button_small',
+        '.button_small_icon',
+        '.navbar_brand_svg',
+        '#heroNavbarLottie path ',
+      ],
+      {
+        color: '#fff',
+        fill: 'rgb(254, 254, 254)',
+      },
+      '<'
+    );
+  } else {
+    const sectionsBgChange = gsap.timeline({
+      duration: 0.2,
+      ease: 'loader2',
+      scrollTrigger: {
+        trigger: '.section.is-skills',
+        start: 'top bottom',
+        end: 'bottom top',
+        toggleActions: 'restart reverse restart 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)',
+      },
+      '<'
+    );
+  }
+});
+
+// Reviews span video mask
+gsap.to('.reviews_headline_ract-mask', {
+  scrollTrigger: { trigger: '.reviews_headline_ract-mask', start: 'bottom bottom-=5%' },
+  width: 0,
+  ease: 'loader2',
+  duration: 0.6,
+});
+
+// Start span video mask
+gsap.to('.start_headline_ract-mask', {
+  scrollTrigger: { trigger: '.start_headline_ract-mask', start: 'bottom bottom-=5%' },
+  width: 0,
+  ease: 'loader2',
+  duration: 0.6,
+});
+
+// Home starts section diagram animation
+// Step 1 timeline
+const startStep1 = gsap.timeline({ paused: true });
+startStep1.fromTo(
+  '#startPath1',
+  {
+    drawSVG: '50%',
+  },
+  {
+    drawSVG: '0% 100%',
+    duration: 1,
+    ease: 'loader',
+  }
+);
+startStep1.from(
+  '#startIcon1',
+  {
+    opacity: 0,
+    duration: 0.3,
+    ease: 'loader',
+  },
+  '<0.1'
+);
+startStep1.from(
+  '#stepPoint1',
+  {
+    opacity: 0,
+    duration: 0.4,
+    ease: 'loader',
+  },
+  0.8
+);
+startStep1.from(
+  '#startGradientMask',
+  {
+    height: '0px',
+    opacity: 0,
+    duration: 0.6,
+    ease: 'loader',
+  },
+  '-=0.8'
+);
+// Step 2 timeline
+const startStep2 = gsap.timeline({ paused: true });
+startStep2.fromTo(
+  '#startPath2',
+  {
+    drawSVG: '50%',
+  },
+  {
+    drawSVG: '0% 100%',
+    duration: 1,
+    ease: 'loader',
+  }
+);
+startStep2.from(
+  '#startIcon2',
+  {
+    opacity: 0,
+    duration: 0.3,
+    ease: 'loader',
+  },
+  '<0.1'
+);
+startStep2.from(
+  '#stepPoint2',
+  {
+    opacity: 0,
+    duration: 0.4,
+    ease: 'loader',
+  },
+  0.8
+);
+// Step 3 timeline
+const startStep3 = gsap.timeline({ paused: true });
+startStep3.fromTo(
+  '#startPath3',
+  {
+    drawSVG: '50%',
+  },
+  {
+    drawSVG: '0% 100%',
+    duration: 1,
+    ease: 'loader',
+  }
+);
+startStep3.from(
+  '#startIcon3',
+  {
+    opacity: 0,
+    duration: 0.3,
+    ease: 'loader',
+  },
+  '<0.1'
+);
+startStep3.from(
+  '#stepPoint3',
+  {
+    opacity: 0,
+    duration: 0.4,
+    ease: 'loader',
+  },
+  0.8
+);
+// Step 4 timeline
+const startStep4 = gsap.timeline({ paused: true });
+startStep4.fromTo(
+  '#startPath4',
+  {
+    drawSVG: '50%',
+  },
+  {
+    drawSVG: '0% 100%',
+    duration: 1,
+    ease: 'loader',
+  }
+);
+startStep4.from(
+  '#startIcon4',
+  {
+    opacity: 0,
+    duration: 0.3,
+    ease: 'loader',
+  },
+  '<0.1'
+);
+startStep4.from(
+  '#stepPoint4',
+  {
+    opacity: 0,
+    duration: 0.4,
+    ease: 'loader',
+  },
+  0.8
+);
+// Whole animation timeline
+const startDiagramAnimation = gsap.timeline({
+  scrollTrigger: {
+    trigger: '.section.is-start',
+    start: 'bottom 110%',
+    end: '+=500',
+  },
+});
+startDiagramAnimation.add(startStep1.play());
+startDiagramAnimation.add(startStep2.play(), '-=0.4');
+startDiagramAnimation.add(startStep3.play(), '-=0.4');
+startDiagramAnimation.add(startStep4.play(), '-=0.4');
+
+// Play cs item video on mouse hover
+document.addEventListener('DOMContentLoaded', () => {
+  if (window.innerWidth > 992) {
+    const vid = document.querySelectorAll('.portfolio_item_image-wrapper');
+
+    vid.forEach((element) => {
+      const videoElements = element.getElementsByTagName('video');
+      const videoElement = videoElements.length > 0 ? videoElements[0] : null;
+      if (!videoElement) return;
+
+      videoElement.addEventListener('loadeddata', () => {
+        videoElement.pause();
+      });
+      element.addEventListener('mouseenter', hoverIN, false);
+      element.addEventListener('mouseleave', hoverOUT, false);
+
+      function hoverIN() {
+        videoElement.play();
+      }
+
+      function hoverOUT() {
+        videoElement.pause();
+        //videoElement.currentTime = 0;
+      }
+    });
+  } else {
+    const videoElems = document.querySelectorAll('.background-video video');
+
+    videoElems.forEach((videoElem) => {
+      const poster = videoElem.getAttribute('poster');
+      videoElem.innerHTML = '';
+      videoElem.setAttribute('poster', poster);
+      videoElem.load();
+      videoElem.pause();
+    });
+  }
+});
+
+// Randomize order of team slider
+const teamList = document.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);
+});
+
+// Clients logos in animation
+const logosStagger = 0.15;
+gsap.from('.clients_collection_item_mask', {
+  scrollTrigger: {
+    trigger: '.clients_collection_item_mask',
+    start: 'top bottom-=25%',
+  },
+  width: '0%',
+  duration: 0.7,
+  ease: 'loader2',
+  stagger: logosStagger,
+});
+gsap.from('.clients_item_image', {
+  scrollTrigger: {
+    trigger: '.clients_collection_item_mask',
+    start: 'top bottom-=25%',
+  },
+  opacity: 0,
+  delay: 0.4,
+  duration: 0.6,
+  ease: 'loader2',
+  stagger: logosStagger,
+});
+
+// Reviews slider animation in
+gsap.from('.splide.is-reviews', {
+  scrollTrigger: {
+    trigger: '.splide.is-reviews',
+    start: 'top bottom',
+    end: 'bottom bottom-=15%',
+    scrub: 1,
+    once: true,
+  },
+  x: '10%',
+  opacity: 0,
+  ease: 'linear',
+});
+
+// Team slider animation in
+gsap.from('.splide.is-team', {
+  scrollTrigger: {
+    trigger: '.splide.is-team',
+    start: 'top bottom',
+    end: 'bottom bottom',
+    scrub: 1,
+    once: true,
+  },
+  x: '10%',
+  opacity: 0,
+  ease: 'linear',
+});
+
+// Hover aimation - Michal
+const michalHover = gsap.timeline({ paused: true, ease: 'loader2' });
+michalHover.from('.team_big-image_person-wrapper.is-m', {
+  x: '5%',
+  opacity: 0,
+  duration: 0.4,
+});
+michalHover.from(
+  '#m-line',
+  {
+    drawSVG: '0% 0%',
+    duration: 0.2,
+  },
+  '>-0.2'
+);
+michalHover.from('#m-arrow', {
+  drawSVG: '0% 0%',
+  duration: 0.15,
+}),
+  '>';
+document.addEventListener('DOMContentLoaded', () => {
+  if (window.innerWidth > 992) {
+    const michalTriegger = document.querySelector('.team_big-image_trigger.is-m');
+    michalTriegger.addEventListener('mouseenter', () => {
+      michalHover.timeScale(1).play();
+    });
+    michalTriegger.addEventListener('mouseleave', () => {
+      michalHover.timeScale(3).reverse();
+    });
+  }
+});
+
+// Hover aimation - Michal
+const krystianHover = gsap.timeline({ paused: true, ease: 'loader2' });
+krystianHover.from('.team_big-image_person-wrapper.is-k', {
+  x: '5%',
+  opacity: 0,
+  duration: 0.4,
+});
+krystianHover.from(
+  '#k-line',
+  {
+    drawSVG: '0% 0%',
+    duration: 0.25,
+  },
+  '>-0.2'
+);
+krystianHover.from('#k-arrow', {
+  drawSVG: '0% 0%',
+  duration: 0.15,
+}),
+  '>';
+document.addEventListener('DOMContentLoaded', () => {
+  if (window.innerWidth > 992) {
+    const krystianTriegger = document.querySelector('.team_big-image_trigger.is-k');
+    krystianTriegger.addEventListener('mouseenter', () => {
+      krystianHover.timeScale(1).play();
+    });
+    krystianTriegger.addEventListener('mouseleave', () => {
+      krystianHover.timeScale(3).reverse();
+    });
+  }
+});
+
+// Hero span hover animation
+const heroSpanContent = document.querySelector('.hero_headline-span');
+const heroSpanContentAnimation = gsap.timeline({ paused: true, ease: 'loader2' });
+heroSpanContentAnimation.to('.hero-line-mask', { clipPath: 'none', duration: 0.05 }, '>');
+heroSpanContentAnimation.to(heroSpanContent, { scale: 2, duration: 0.35 }, '>');
+document.addEventListener('DOMContentLoaded', () => {
+  if (window.innerWidth > 992) {
+    heroSpanContent.addEventListener('mouseenter', () => {
+      heroSpanContentAnimation.timeScale(1).play();
+    });
+    heroSpanContent.addEventListener('mouseleave', () => {
+      heroSpanContentAnimation.timeScale(2).reverse();
+    });
+  }
+});
+
+// Reel modal animation
+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();
+  });
+}
+
+// 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';
+    }
+  }
+});
+
+
 
-// Before you start:
-// 1. Change name and URL in package.json file
-// 2. Build and release to npm
-// 3. Replace the npm path in Webflow site custom footer code
-// 4. Remove these comments
 
 
-// -----> Write your functions here
 
 
 
@@ -19,4 +981,14 @@ import {initAlpine} from "./init";
 window.Webflow ||= [];
 window.Webflow.push(() => {
   initAlpine();
+  lenisScroll();
+  customGsapEasing();
+  lazyLoad();
+  reloadOnBack();
+  transitionLinksRule();
+  onScreenResize();
+  revealFooter();
+  customCursorOnClick();
+  customCursorChangeCopy();
+  headeronScroll();
 });