@widelab-nc/widelab 1.1.37 → 1.1.38

package/package.json

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

package/src/index.js

@@ -35,6 +35,68 @@ function scrollToHashOnLoad(offsetY = 0) {
 
 // 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() {
@@ -239,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({
@@ -360,49 +530,65 @@ window.customCursorTextUpdate = function(el) {
     );
   }
 
+
+
 // 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');
+  const triggerEl = e.querySelector('.portfolio_item_image-wrapper') || e; // safer trigger
+
+  // --- iOS detection (reliable enough for layout fallbacks) ---
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+
+  // 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'
+    });
+  }
 
-  // Build a single timeline so the pill fades in AFTER the mask animation
-  const tl = gsap.timeline({
-    paused: true,
-    defaults: { ease: 'loader2' }
-  });
-
-  // Ensure pill starts hidden
-  if (pill) gsap.set(pill, { autoAlpha: 0 }); // autoAlpha controls visibility + opacity
-
-  // Mask reveals first...
-  tl.from(mask, {
-    width: '100%',
-    duration: 0.35
-  });
-
-  // ...then pill fades in as the last step
+  // 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
-    });
+    tl.to(pill, { autoAlpha: 1, duration: 0.25 }, '>-0.05');
   }
 
-  // Trigger on scroll
+  // Scroll trigger (use wrapper, not absolute mask)
   ScrollTrigger.create({
     animation: tl,
-    trigger: mask,
+    trigger: triggerEl,
     start: 'top 80%',
-    onEnter: () => tl.play()
+    once: true
   });
 
-  // Video on hover actions
+  // --- 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();
     });
@@ -410,26 +596,45 @@ window.caseStudyInteraction = function (e) {
     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();
+    // 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 {
+        // 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
@@ -2023,6 +2228,7 @@ window.closeInfoBar = function() {
       lenis.destroy();
     }
     customGsapEasing();
+
     reloadOnBack();
     revealFooter();
     pageLoadAnimation();
@@ -2031,4 +2237,5 @@ window.closeInfoBar = function() {
     contactFormOpenAnimation();
     disableScrollMenu();
     scrollToHashOnLoad();
+    initClientLogosAnimation();
   });