@widelab-nc/widelab 1.0.20 → 1.0.22

package/dist/style.css

@@ -1,2 +1 @@
 html.lenis{height:auto}.splide__list{user-select:none}.hero_headline.is-cta{text-wrap:balance}#heroHeading{pointer-events:none;user-select:none}.hero_headline-span{pointer-events:auto;z-index:-1}.hero-line-mask:first-of-type{z-index:2}.hero_headline-span{aspect-ratio:65/23}.clients_collection_item_wrapper{aspect-ratio:1/1}.start_diagram_step_path-mask{aspect-ratio:2/1}.splide__track{overflow:visible}.splide__pagination__page.reviews-page,.splide__pagination__page.facts-page{height:.625rem;width:.625rem;background:#b2b2b2;opacity:.5;margin:.25rem}.splide__pagination__page.reviews-page.is-active,.splide__pagination__page.facts-page.is-active{height:.625rem;width:.625rem;background:#000;opacity:1;transform:none}.footer_logo-svg{aspect-ratio:1286/185}address{font-style:normal}.bottom-wrapper_footer-spacer,.whats-next_links_item_image-wrapper,.reel-modal_player{pointer-events:none}.skills_item_hover-track.is-design{white-space:nowrap;will-change:transform;animation:marquee-horizontal 12s linear infinite}.skills_item_hover-track.is-branding,.skills_item_hover-track.is-nocode{white-space:nowrap;will-change:transform;animation:marquee-horizontal 5s linear infinite}@keyframes marquee-horizontal{0%{transform:translate(0)}to{transform:translate(-50%)}}.splide__pagination.facts-pagination{padding:0;align-items:start;justify-content:left}.hero-line-mask,.stats-line-mask,.facts-line-mask,.cs-line-mask{clip-path:polygon(0 0,100% 0,100% 110%,0 110%)}@media only screen and (min-width: 992px){#csSingleFooter{position:static}#csItemTransformWrapper,#csItemNotTransformWrapper{padding-left:2.5rem;padding-right:2.5rem}.portfolio_item_image-wrapper.is-portrait{aspect-ratio:31/32}.portfolio_item_image-wrapper{aspect-ratio:4/3}.portfolio_wrapper.is-2-col>.portfolio_item:first-child .portfolio_item_content,.portfolio_item.is-1-left .portfolio_item_content{padding-left:2.5rem}.splide__pagination.reviews-pagination{bottom:-3.625rem}.splide__pagination.facts-pagination{bottom:2.25rem;left:0;right:0}#stickyNavbar{padding:1rem 2.5rem}.button_small .link,.portfolio_item .is-p-l.is-link,.cookies-button{position:relative;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:100% .08em;transition:background-size .2s cubic-bezier(.65,0,.35,1)}.button_small:hover .link,.button_small:focus .link,.portfolio_item:hover .is-p-l.is-link,.portfolio_item:active .is-p-l.is-link,.cookies-button:hover,.cookies-button:active{background-size:0% .08em}.button_small .button_small_icon_circle,.cta_link .cta_link_icon-wrapper{position:relative}.button_small .button_small_icon_circle:after,.cta_link .cta_link_icon-wrapper:after{background-color:inherit;border-radius:50%;content:"";position:absolute;inset:0;z-index:-1;transition:.3s cubic-bezier(.83,0,.17,1)}.button_small:hover .button_small_icon_circle:after,.cta_link:hover .cta_link_icon-wrapper:after{scale:1.2}.navbar_menu_link,.footer_menu_link,.is-link,.cta_link .is-h4{position:relative;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0% .08em;transition:background-size .2s cubic-bezier(.65,0,.35,1)}.navbar_menu_link:hover,.navbar_menu_link:focus,.footer_menu_link:hover,.footer_menu_link:focus,.is-link:hover,.is-link_link:focus,.cta_link:hover .is-h4,.cta_link:focus .is-h4{background-size:100% .08em}}@media only screen and (max-width: 1180px) and (min-width: 992px){.stats-content_wrapper{padding-right:4vw}}@media only screen and (max-width: 1280px) and (min-width: 992px){.section.is-cs-2col{padding-left:2.5rem;padding-right:2.5rem}}@media only screen and (max-width: 991px){.navbar .button_small .button_small_icon_circle{display:none}#csItemTransformWrapper{padding-left:1.75rem;padding-right:1.75rem}.portfolio_item_image-wrapper{aspect-ratio:6/5}.button_small .link,.portfolio_item .is-p-l.is-link,.cta_link.is-mobile-nav .is-p-l,.cookies-button{position:relative;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:100% .08em}.splide__pagination.reviews-pagination{bottom:-3.5rem}.splide__pagination.facts-pagination{top:15.25rem;left:0;right:0}.splide__list.team_collection_list{overflow:visible}}@media only screen and (max-width: 767px){#csItemTransformWrapper{padding-left:1.375rem;padding-right:1.375rem}.reel_prev_mask{aspect-ratio:19/22}.splide__pagination.facts-pagination{top:13.5rem;left:0;right:0}.portfolio_item_image-wrapper{aspect-ratio:95/79}.splide__pagination.reviews-pagination{bottom:-3rem}}.background-video{height:100%;position:relative;overflow:hidden}.background-video>video{width:100%;height:100%;object-fit:cover;z-index:-100;background-position:50%;background-size:cover;margin:auto;position:absolute;inset:-100%}.background-video>video::-webkit-media-controls-start-playback-button{-webkit-appearance:none;display:none!important}.background-video--control{background-color:#0000;padding:0;position:absolute;bottom:1em;right:1em}.background-video--control>[hidden]{display:none!important}
-/*# sourceMappingURL=style.css.map */

package/package.json

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

package/src/index.js

@@ -8,6 +8,7 @@ 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, DrawSVGPlugin);
 function customGsapEasing() {
@@ -77,14 +78,17 @@ function customGsapEasing() {
 
   // Hero move to reveal footer
   function revealFooter() {
-    gsap.to('#heroSection', {
-      scrollTrigger: {
-        trigger: '#bottomWrapper',
-        start: 'top bottom',
-        toggleActions: 'restart none none reverse',
-      },
-      autoAlpha: 0,
-    });
+    const footer = document.querySelector('.is-footer');
+    if (footer) {
+      gsap.to('#heroSection', {
+        scrollTrigger: {
+          trigger: '#bottomWrapper',
+          start: 'top bottom',
+          toggleActions: 'restart none none reverse',
+        },
+        autoAlpha: 0,
+      });
+    }
   }
 
   // Page load animation
@@ -405,23 +409,76 @@ function customGsapEasing() {
     });
 
     // Animations
-    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();
+// Function to play video on the active slide
+    function playActiveSlideVideo(newIndex) {
+      var activeSlide = factsSplide.Components.Elements.slides[newIndex];
+      var activeVideo = activeSlide.querySelector('video');
+      if (activeVideo) {
+        activeVideo.play();
       }
+    }
+
+// Function to pause and rewind videos on inactive slides
+    function pauseAndRewindInactiveVideos(newIndex) {
+      var slides = factsSplide.Components.Elements.slides;
+      slides.forEach(function (slide, index) {
+        var video = slide.querySelector('video');
+        if (video && index !== newIndex) {
+          video.pause();
+          video.currentTime = 0; // rewind the video
+        }
+      });
+    }
+// Function to animate elements on the active slide
+    function animateSlideElements(slide) {
+      gsap.fromTo(
+        [
+          slide.querySelector('.is-h4'),
+          slide.querySelector('.facts-slide_legend-wrapper'),
+          slide.querySelector('.facts-slide_diagram-wrapper'),
+          slide.querySelector('.facts-slide_source')
+        ],
+        {
+          x: '2rem',
+          opacity: 0
+        },
+        {
+          x: '0',
+          opacity: 1,
+          stagger: 0.2,
+          duration: 0.5,
+          easing: 'loader2'
+        }
+      );
+    }
+// Function to reset animation for the elements in the slide
+    function resetSlideAnimation(slide) {
+      gsap.set(
+        [
+          slide.querySelector('.is-h4'),
+          slide.querySelector('.facts-slide_legend-wrapper'),
+          slide.querySelector('.facts-slide_diagram-wrapper'),
+          slide.querySelector('.facts-slide_source')
+        ],
+        {
+          x: '2rem',
+          opacity: 0
+        }
+      );
+    }
+// Event listener for 'move' event
+    factsSplide.on('move', function (newIndex) {
+      playActiveSlideVideo(newIndex);
+      var activeSlide = factsSplide.Components.Elements.slides[newIndex];
+      animateSlideElements(activeSlide);
     });
-    ScrollTrigger.create({
-      trigger: '.section.is-facts',
-      start: 'top bottom',
-      once: true,
-      onToggle: () => {
-        document.querySelector('.facts-slide_diagram-trigger.is-0').click();
-      },
+// Event listener for 'moved' event
+    factsSplide.on('moved', function (oldIndex) {
+      pauseAndRewindInactiveVideos(oldIndex);
+      var previousSlide = factsSplide.Components.Elements.slides[oldIndex];
+      resetSlideAnimation(previousSlide);
     });
+
   }
 
   // Team slider
@@ -788,6 +845,116 @@ function customGsapEasing() {
     });
   }
 
+  // Sliders on Services page
+  window.servicesSliders = function(e) {
+    const config = {
+      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 services-pagination',
+        page: 'splide__pagination__page services-page',
+      },
+      breakpoints: {
+        992: { drag: true, fixedWidth: '90%' },
+        480: {},
+      },
+    };
+    const slider = new Splide(e, config).mount();
+    if (window.innerWidth > 992) {
+        slider.on('click', function () {
+          slider.go('+1');
+        });
+    }
+      gsap.from(e, {
+        scrollTrigger: {
+          trigger: e,
+          start: 'top bottom',
+          end: 'bottom bottom+=15%',
+          scrub: 1,
+          once: true,
+        },
+        x: '10%',
+        opacity: 0,
+        ease: 'linear',
+      });
+  }
+
+  // Case study - What's next interaction
+  window.whatsNext = function() {
+    const caseItem = document.querySelectorAll('.whats-next_links_item.is-case');
+    const allCases = document.querySelector('.whats-next_links_item.is-all');
+    caseItem.forEach((item) => {
+      const imageMask = item.querySelector('.whats-next_links_item_image_mask');
+      const imageWrapper = item.querySelector('.whats-next_links_item_image-wrapper');
+      const whatsNextHover = gsap.timeline({ paused: true, ease: 'loader2' });
+      whatsNextHover.to(imageWrapper, { opacity: 0.8, duration: 0.15 });
+      whatsNextHover.to(imageMask, { width: '0%', duration: 0.3 }, '>-0.');
+      item.addEventListener('mouseenter', () => {
+        whatsNextHover.timeScale(1).play();
+        caseItem.forEach((i) => {
+          if (i !== event.target) {
+            gsap.to(i, { color: '#7A7A7A', duration: 0.2, ease: 'loader2' });
+          }
+        });
+      });
+      item.addEventListener('mouseleave', () => {
+        whatsNextHover.timeScale(3).reverse();
+        caseItem.forEach((i) => {
+          if (i !== event.target) {
+            gsap.to(i, { color: '#fff', duration: 0.1, ease: 'loader2' });
+          }
+        });
+      });
+    });
+    allCases.addEventListener('mouseenter', () => {
+      gsap.to(allCases, { color: '#fff', duration: 0.2, ease: 'loader2' });
+      caseItem.forEach((item) => {
+        gsap.to(item, { color: '#7A7A7A', duration: 0.2, ease: 'loader2' });
+      });
+    });
+    allCases.addEventListener('mouseleave', () => {
+      gsap.to(allCases, { color: '#7A7A7A', duration: 0.2, ease: 'loader2' });
+      caseItem.forEach((item) => {
+        gsap.to(item, { color: '#fff', duration: 0.2, ease: 'loader2' });
+      });
+    });
+
+// Remove responsive image feature from CS pages
+    for (var i = 0; i < document.getElementsByTagName('img').length; i++) {
+      document.getElementsByTagName('img')[i].srcset = '';
+    }
+    for (var i = 0; i < document.getElementsByTagName('img').length; i++) {
+      document.getElementsByTagName('img')[i].sizes = '';
+    }
+  }
+
+  // Case study - images mask animation
+  window.csMaskAnimation = function() {
+    const csImageMasks = document.querySelectorAll('.portfolio_item_image-mask');
+    csImageMasks.forEach((mask, index) => {
+      if (index === 0) {
+        return;
+      }
+      const maskAnimation = gsap.from(mask, {
+        width: '100%',
+        duration: 0.7,
+        ease: 'loader2',
+        paused: true,
+      });
+      ScrollTrigger.create({
+        animation: maskAnimation,
+        trigger: mask,
+        start: 'top 80%',
+        onEnter: () => maskAnimation.play(),
+      });
+    });
+  }
+
 
   // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
   window.Webflow ||= [];
@@ -813,4 +980,4 @@ function customGsapEasing() {
       disableScrollMenu();
     }
 
-  });
+  });