@widelab-nc/widelab 1.1.36 → 1.1.38

package/package.json

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

package/src/index.js

@@ -16,8 +16,87 @@ 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
 
+// === Skills: ScrollTrigger + GSAP init (definition only) ===
+// You will call this yourself later, e.g. initSkillsTriggers({ section: '#skills' })
+// Client logos reveal inside a section (definition only; you call it later)
+function initClientLogosAnimation(rootEl, userOpts = {}) {
+  // ---- guards ----
+  if (!window.gsap || !window.ScrollTrigger) {
+    console.warn('[client-logos] GSAP/ScrollTrigger missing');
+    return { ok: false, reason: 'gsap-or-plugin-missing' };
+  }
+
+  const gsap = window.gsap;
+  const ScrollTrigger = window.ScrollTrigger;
+  try { gsap.registerPlugin(ScrollTrigger); } catch (_) {}
+
+  // ---- config ----
+  const opts = {
+    // adjust these to your real structure if needed
+    listSelector: '.clients_wrapper-bento',
+    itemSelector: '.clients_wrapper-bento .bento_item, .client-logo, .logo',
+    start: 'top 80%',
+    end: 'bottom top',
+    markers: false,
+    ...userOpts
+  };
+
+  // ---- scope ----
+  const root = rootEl && rootEl.nodeType === 1 ? rootEl : document;
+  const list = root.querySelector(opts.listSelector);
+  const items = list ? Array.from(list.querySelectorAll(opts.itemSelector)) : [];
+
+  // nothing to animate? bail quietly (prevents "GSAP target … not found")
+  if (!list || !items.length) {
+    return { ok: false, reason: 'targets-not-found', listFound: !!list, count: items.length };
+  }
+
+  // kill old triggers bound to this list (idempotent reruns)
+  ScrollTrigger.getAll().forEach(st => {
+    if (st && st.trigger === list) st.kill(false);
+  });
+
+  // ---- animation ----
+  gsap.from(items, {
+    y: 16,
+    opacity: 0,
+    duration: 0.6,
+    ease: 'power2.out',
+    stagger: 0.06,
+    scrollTrigger: {
+      trigger: list,
+      start: opts.start,
+      end: opts.end,
+      toggleActions: 'play none none reverse',
+      markers: opts.markers,
+      invalidateOnRefresh: true
+    }
+  });
+
+  // refresh after layout settles
+  requestAnimationFrame(() => { try { ScrollTrigger.refresh(); } catch(_) {} });
+
+  return { ok: true, count: items.length };
+}
 // Contact form open animation
 let contactFormOpen;
 function contactFormOpenAnimation() {
@@ -222,6 +301,114 @@ if (infoBar) {
     });
   }
 
+// === SKILLS TRIGGER HARD-FIX (drop-in) ===
+(function () {
+  const DEBUG = false; // flip to true to see console + markers
+
+  if (!window.gsap || !window.ScrollTrigger) {
+    console.error('[skills-fix] GSAP/ScrollTrigger missing');
+    return;
+  }
+  gsap.registerPlugin(ScrollTrigger);
+
+  // 1) Pick the VISIBLE "skills" section (ignore duplicates/hidden)
+  const candidates = Array.from(document.querySelectorAll('#skills, .section.is-skills'));
+  const el = candidates.find(n => {
+    const r = n.getBoundingClientRect();
+    const style = getComputedStyle(n);
+    return r.width > 0 && r.height > 0 && style.display !== 'none' && style.visibility !== 'hidden';
+  });
+  if (!el) {
+    console.error('[skills-fix] skills section not found or not visible');
+    return;
+  }
+
+  // 2) Diagnose ancestors that break ScrollTrigger (transform / overflow != visible)
+  const badAncestors = [];
+  let p = el.parentElement;
+  while (p && p !== document.body) {
+    const cs = getComputedStyle(p);
+    const badTransform = cs.transform && cs.transform !== 'none';
+    const badOverflow = (cs.overflow !== 'visible' || cs.overflowY !== 'visible' || cs.overflowX !== 'visible');
+    if (badTransform || badOverflow) badAncestors.push({ node: p, badTransform, badOverflow });
+    p = p.parentElement;
+  }
+
+  // 3) Neutralize only the dangerous bits, minimally
+  badAncestors.forEach(({ node, badTransform }) => {
+    // overflow hidden na wrapperach zostawiamy (często layout), ScrollTrigger sobie radzi;
+    // PRZEWAŻNIE zabija go transform na rodzicu — zdejmujemy go klasą.
+    if (badTransform) node.classList.add('st-fix-transform');
+  });
+
+  // 4) Inject minimal CSS to neutralize transforms (non-destructive)
+  const styleTag = document.createElement('style');
+  styleTag.textContent = `
+    .st-fix-transform { transform: none !important; }
+  `;
+  document.head.appendChild(styleTag);
+
+  // 5) Kill duplicated triggers on the same element
+  ScrollTrigger.getAll().forEach(st => { if (st.trigger === el) st.kill(false); });
+
+  // 6) The exact action you expect
+  const run = (target) => {
+    try { window.sectionBgChange && window.sectionBgChange(target); } catch (e) {}
+    try { window.badgeColorChange && window.badgeColorChange(target); } catch (e) {}
+    if (DEBUG) console.log('[skills-fix] run()', target);
+  };
+
+  // 7) Fire immediately if already on screen (new layout often loads in-view)
+  const r = el.getBoundingClientRect();
+  if (r.top < innerHeight && r.bottom > 0) run(el);
+
+  // 8) Create robust trigger (same feel as old), with optional markers
+  ScrollTrigger.create({
+    trigger: el,
+    start: 'top 80%',
+    end: 'bottom top',
+    onEnter: self => run(self.trigger),
+    onEnterBack: self => run(self.trigger),
+    markers: !!DEBUG,
+    fastScrollEnd: true,
+    invalidateOnRefresh: true
+  });
+
+  // 9) Refresh after things that commonly shift layout on new home
+  const doRefresh = () => {
+    if (DEBUG) console.log('[skills-fix] refresh()');
+    ScrollTrigger.refresh();
+  };
+
+  // after images
+  if (document.readyState === 'complete') requestAnimationFrame(doRefresh);
+  else window.addEventListener('load', () => requestAnimationFrame(doRefresh));
+
+  // after Webflow IX (if present)
+  try {
+    if (window.Webflow && Webflow.require) {
+      const ix2 = Webflow.require('ix2');
+      if (ix2 && ix2.ready) setTimeout(doRefresh, 300); // allow IX to apply styles
+    }
+  } catch (e) {}
+
+  // after Alpine renders (x-init etc.)
+  document.addEventListener('alpine:init', () => setTimeout(doRefresh, 100));
+  document.addEventListener('DOMContentLoaded', () => setTimeout(doRefresh, 150));
+
+  // As a last resort: one more refresh when user starts scrolling
+  let firstScroll = false;
+  const onFirstScroll = () => { if (!firstScroll) { firstScroll = true; doRefresh(); } };
+  window.addEventListener('scroll', onFirstScroll, { passive: true, once: true });
+
+  if (DEBUG) {
+    console.group('[skills-fix] diagnostics');
+    console.log('picked element:', el);
+    console.log('bad ancestors:', badAncestors);
+    console.groupEnd();
+  }
+})();
+
   // Header scroll trigger
   window.standardHeaderScrollAnimation = function() {
     ScrollTrigger.create({
@@ -343,54 +530,111 @@ 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(),
-      });
 
-      // 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);
+// Case study mask animation + pill fade-in (last step)
+window.caseStudyInteraction = function (e) {
+  const mask = e.querySelector('.portfolio_item_image-mask');
+  const pill = e.querySelector('.cs_pill');
+  const triggerEl = e.querySelector('.portfolio_item_image-wrapper') || e; // safer trigger
 
-        function hoverIN() {
-          videoElement.play();
-        }
+  // --- iOS detection (reliable enough for layout fallbacks) ---
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
 
-        function hoverOUT() {
-            videoElement.pause();
-            //videoElement.currentTime = 0;
+  // Ensure initial states
+  if (pill) gsap.set(pill, { autoAlpha: 0 }); // hide pill
+  if (mask) {
+    // Use transform-based reveal, much more reliable on iOS
+    gsap.set(mask, {
+      scaleX: 1,
+      transformOrigin: 'left center',
+      willChange: 'transform'
+    });
+  }
+
+  // Timeline: mask reveal -> pill fade-in
+  const tl = gsap.timeline({ paused: true, defaults: { ease: 'loader2' } });
+  if (mask) {
+    // Reveal by scaling mask from full (1) to zero (0)
+    tl.to(mask, { scaleX: 0, duration: 0.35 });
+  }
+  if (pill) {
+    tl.to(pill, { autoAlpha: 1, duration: 0.25 }, '>-0.05');
+  }
+
+  // Scroll trigger (use wrapper, not absolute mask)
+  ScrollTrigger.create({
+    animation: tl,
+    trigger: triggerEl,
+    start: 'top 80%',
+    once: true
+  });
+
+  // --- Video handling ---
+  const videoElements = e.getElementsByTagName('video');
+
+  if (window.innerWidth > 992) {
+    const videoElement = videoElements.length > 0 ? videoElements[0] : null;
+    if (!videoElement) return;
+
+    // Force Safari compositing on the video
+    videoElement.style.transform = 'translateZ(0)';
+
+    // Desktop: hover play/pause
+    const hoverIN = () => videoElement.play();
+    const hoverOUT = () => {
+      videoElement.pause();
+      // videoElement.currentTime = 0; // optional reset
+    };
+
+    // Pause once metadata is ready
+    videoElement.addEventListener('loadeddata', () => {
+      videoElement.pause();
+    });
+
+    e.addEventListener('mouseenter', hoverIN, false);
+    e.addEventListener('mouseleave', hoverOUT, false);
+
+  } else {
+    // Mobile
+    Array.from(videoElements).forEach((v) => {
+      const poster = v.getAttribute('poster');
+
+      if (isIOS) {
+        // iOS: safest is to replace <video> with an <img> using the poster
+        if (poster) {
+          const img = new Image();
+          img.src = poster;
+          img.alt = '';
+          img.className = v.className; // preserve classes if needed
+          // Keep sizing via CSS from the video
+          v.replaceWith(img);
+        } else {
+          // If no poster, fall back to pausing & keeping sources
+          v.removeAttribute('autoplay');
+          v.pause();
+          v.preload = 'none';
         }
-    } else {
-        videoElements.forEach((videoElem) => {
-        const poster = videoElem.getAttribute('poster');
-        videoElem.innerHTML = '';
-        videoElem.setAttribute('poster', poster);
-        videoElem.load();
-        videoElem.pause();
-      });
-    }
+      } else {
+        // Android: keep poster only, but DON'T remove sources (some browsers need metadata for sizing)
+        v.removeAttribute('autoplay');
+        v.pause();
+        v.preload = 'none';
+        // Keeping sources avoids 0-height issues in some engines
+        // v.load(); // optional: only if you observe stale frames
+      }
+    });
   }
 
+  // After images/posters load, refresh ScrollTrigger (prevents late layout causing missed triggers)
+  // Safe to call; GSAP debounces
+  setTimeout(() => ScrollTrigger.refresh(), 100);
+};
+
+
+
+
   // Reviews slider
   window.reviewsSlider = function(e) {
     // Put content of static slide into list
@@ -446,61 +690,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 +1873,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);
@@ -2038,6 +2228,7 @@ window.closeInfoBar = function() {
       lenis.destroy();
     }
     customGsapEasing();
+
     reloadOnBack();
     revealFooter();
     pageLoadAnimation();
@@ -2045,4 +2236,6 @@ window.closeInfoBar = function() {
     customCursorOnClick();
     contactFormOpenAnimation();
     disableScrollMenu();
+    scrollToHashOnLoad();
+    initClientLogosAnimation();
   });