@widelab-nc/widelab 1.0.2 → 1.0.4

package/src/index.js

@@ -1,4 +1,4 @@
-import {initAlpine} from "./init";
+//import {initAlpine} from "./init";
 import Lenis from '@studio-freight/lenis';
 import { gsap } from 'gsap';
 import { CustomEase } from 'gsap/CustomEase';
@@ -222,754 +222,6 @@ homeLoadAnimation.from(
   '>-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';
-    }
-  }
-});
-
-
-
-
-
 
 
 
@@ -980,7 +232,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
 // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
 window.Webflow ||= [];
 window.Webflow.push(() => {
-  initAlpine();
+  //initAlpine();
   lenisScroll();
   customGsapEasing();
   lazyLoad();