@widelab-nc/widelab 1.1.36 → 1.1.37

package/package.json

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

package/src/index.js

@@ -16,6 +16,23 @@ function customGsapEasing() {
   CustomEase.create('loader2', '0.77, 0, 0.175, 1');
 }
 
+// Smoothly scrolls to section if current URL contains a hash
+function scrollToHashOnLoad(offsetY = 0) {
+  window.addEventListener('load', () => {
+    const hash = window.location.hash;
+    if (!hash) return;
+
+    const target = document.querySelector(hash);
+    if (!target) return;
+
+    gsap.to(window, {
+      scrollTo: { y: target, offsetY: offsetY },
+      duration: 1,
+      ease: 'power2.out'
+    });
+  });
+}
+
 // Functions definitions
 
 // Contact form open animation
@@ -343,53 +360,75 @@ window.customCursorTextUpdate = function(el) {
     );
   }
 
-  // Case study mask animation
-  window.caseStudyInteraction = function(e) {
-    // Video mask animation
-      const mask = e.querySelector('.portfolio_item_image-mask');
-      const maskAnimation = gsap.from(mask, {
-        width: '100%',
-        duration: 0.35,
-        ease: 'loader2',
-        paused: true,
-      });
-      ScrollTrigger.create({
-        animation: maskAnimation,
-        trigger: mask,
-        start: 'top 80%',
-        onEnter: () => maskAnimation.play(),
-      });
+// Case study mask animation + pill fade-in (last step)
+window.caseStudyInteraction = function (e) {
+  // Video mask + pill timeline
+  const mask = e.querySelector('.portfolio_item_image-mask');
+  const pill = e.querySelector('.cs_pill');
 
-      // Video on hover actions
-      const videoElements = e.getElementsByTagName('video');
-      if (window.innerWidth > 992) {
-        const videoElement = videoElements.length > 0 ? videoElements[0] : null;
-        if (!videoElement) return;
+  // Build a single timeline so the pill fades in AFTER the mask animation
+  const tl = gsap.timeline({
+    paused: true,
+    defaults: { ease: 'loader2' }
+  });
 
-        videoElement.addEventListener('loadeddata', () => {
-            videoElement.pause();
-        });
-        e.addEventListener('mouseenter', hoverIN, false);
-        e.addEventListener('mouseleave', hoverOUT, false);
+  // Ensure pill starts hidden
+  if (pill) gsap.set(pill, { autoAlpha: 0 }); // autoAlpha controls visibility + opacity
 
-        function hoverIN() {
-          videoElement.play();
-        }
+  // Mask reveals first...
+  tl.from(mask, {
+    width: '100%',
+    duration: 0.35
+  });
 
-        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();
-      });
+  // ...then pill fades in as the last step
+  if (pill) {
+    tl.to(pill, {
+      autoAlpha: 1,
+      duration: 0.25
+    });
+  }
+
+  // Trigger on scroll
+  ScrollTrigger.create({
+    animation: tl,
+    trigger: mask,
+    start: 'top 80%',
+    onEnter: () => tl.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 {
+    // Mobile: keep poster only
+    Array.from(videoElements).forEach((videoElem) => {
+      const poster = videoElem.getAttribute('poster');
+      videoElem.innerHTML = '';
+      videoElem.setAttribute('poster', poster);
+      videoElem.load();
+      videoElem.pause();
+    });
   }
+};
 
   // Reviews slider
   window.reviewsSlider = function(e) {
@@ -446,61 +485,6 @@ window.customCursorTextUpdate = function(el) {
     });
   }
 
-// Reviews slider
-window.reviewsSlider = function(e) {
-  // Put content of static slide into list
-  const staticContent = e.querySelector(
-    '.splide__slide.reviews_collection_item.is-static'
-  ).innerHTML;
-  const dynamicElement = e.querySelector('.reviews_collection_item');
-  dynamicElement.innerHTML = staticContent;
-  dynamicElement.classList.add('is-static');
-
-  // Init reviews splide
-  const reviewsSplide = new Splide(e, {
-    type: 'slide',
-    fixedWidth: '24.5rem',
-    rewind: true,
-    focus: 0,
-    padding: { left: '2.5rem', right: 0 },
-    gap: 0,
-    omitEnd: true,
-    arrows: false,
-    drag: false,
-    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' }},
-    },
-  }).mount();
-
-  // Next slide on click
-  if (window.innerWidth > 992) {
-    reviewsSplide.on('click', function () {
-      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
@@ -1684,6 +1668,7 @@ window.initBentoRevealScrub = function (container) {
     }
   );
 };
+
 window.initPartnerVideos = function (container) {
   const items = Array.from(container.querySelectorAll('.partner_item'));
   const vids = items.map(i => i.querySelector('video')).filter(Boolean);
@@ -2045,4 +2030,5 @@ window.closeInfoBar = function() {
     customCursorOnClick();
     contactFormOpenAnimation();
     disableScrollMenu();
+    scrollToHashOnLoad();
   });