@widelab-nc/widelab 1.1.37 → 1.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widelab",
-  "version": "1.1.37",
+  "version": "1.1.39",
   "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() {
@@ -142,50 +204,54 @@ function contactFormOpenAnimation() {
     }
   }
 
-  // Page load animation
-  function pageLoadAnimation() {
-    const loaderAnimationIn = gsap.timeline({});
-    loaderAnimationIn
-      .add(function() {
-        history.scrollRestoration = 'manual';
-        lenis.scrollTo(0);
-      })
-    loaderAnimationIn.to(
-      '.loader_ract.is-left',
-      {
-        delay: 0.2,
-        duration: 0.7,
-        x: '100%',
-        ease: 'loader2',
-      },
-      '>'
-    );
-    loaderAnimationIn.to(
-      '.loader_ract.is-right',
-      {
-        duration: 0.7,
-        x: '-100%',
-        ease: 'loader2',
-      },
-      '<'
-    );
-    loaderAnimationIn.add(function() {
-      lenis.start();
-    }, '>');
-    loaderAnimationIn.to('.loader_wrapper', { display: 'none', duration: 0.1 }, '>');
-    // Update on screen resize
-    window.addEventListener('resize', function () {
-      setTimeout(function () {
-        gsap.set('.loader_wrapper', { display: 'none' });
-      }, 50);
-    });
-  }
+// Page load animation (no-op below 992px)
+function pageLoadAnimation() {
+  if (window.innerWidth < 992) return; // guard for mobile/tablet
+
+  const loaderAnimationIn = gsap.timeline({});
+  loaderAnimationIn.add(function () {
+    history.scrollRestoration = 'manual';
+    lenis.scrollTo(0);
+  });
+  loaderAnimationIn.to(
+    '.loader_ract.is-left',
+    {
+      delay: 0.2,
+      duration: 0.7,
+      x: '100%',
+      ease: 'loader2',
+    },
+    '>'
+  );
+  loaderAnimationIn.to(
+    '.loader_ract.is-right',
+    {
+      duration: 0.7,
+      x: '-100%',
+      ease: 'loader2',
+    },
+    '<'
+  );
+  loaderAnimationIn.add(function () {
+    lenis.start();
+  }, '>');
+  loaderAnimationIn.to('.loader_wrapper', { display: 'none', duration: 0.1 }, '>');
+  // Keep your resize fix
+  window.addEventListener('resize', function () {
+    setTimeout(function () {
+      gsap.set('.loader_wrapper', { display: 'none' });
+    }, 50);
+  });
+}
+
+// Page transition animation (no-op below 992px)
+function pageTransitionAnimation() {
+  if (window.innerWidth < 992) return; // guard for mobile/tablet
 
-  // Page transition animation
-  function pageTransitionAnimation() {
   const transitionLinks = document.querySelectorAll(
-    'a:not([/**/href^="#"]):not([href^="javascript:"]):not([href=""]):not([href^="mailto:"]):not([href^="tel:"])'
+    'a:not([href^="#"]):not([href^="javascript:"]):not([href=""]):not([href^="mailto:"]):not([href^="tel:"])'
   );
+
   transitionLinks.forEach((link) => {
     if (link.getAttribute('target') !== '_blank') {
       link.addEventListener('click', (e) => {
@@ -201,15 +267,12 @@ function contactFormOpenAnimation() {
           duration: 0.4,
           width: '0%',
           ease: 'loader2',
-        }),
-          '>';
-        // play the timeline
+        });
         loaderAnimationOut.play();
       });
     }
   });
-  }
-
+}
   // Header on scroll animation
 const infoBar = document.querySelector('.info-bar');
   const showHideHeader = gsap.timeline({  paused: true,})
@@ -239,6 +302,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,76 +531,89 @@ window.customCursorTextUpdate = function(el) {
     );
   }
 
-// Case study mask animation + pill fade-in (last step)
+
+// Case study mask animation + pill fade-in (full, iOS-safe, L->R reveal)
 window.caseStudyInteraction = function (e) {
-  // Video mask + pill timeline
   const mask = e.querySelector('.portfolio_item_image-mask');
   const pill = e.querySelector('.cs_pill');
-
-  // 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
-  if (pill) {
-    tl.to(pill, {
-      autoAlpha: 1,
-      duration: 0.25
+  const triggerEl = e.querySelector('.portfolio_item_image-wrapper') || e;
+
+  // iOS detection for safe fallbacks
+  const isIOS =
+    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+
+  // --- Initial states ---
+  if (pill) gsap.set(pill, { autoAlpha: 0 });
+  if (mask) {
+    // We fully cover first, then shrink to reveal from LEFT to RIGHT.
+    // To reveal L->R we set origin to RIGHT and scaleX: 1 -> 0
+    gsap.set(mask, {
+      clearProps: 'width',          // ignore any inline width
+      scaleX: 1,
+      transformOrigin: 'right center',
+      willChange: 'transform'
     });
   }
 
-  // Trigger on scroll
+  // --- Timeline: mask reveal then pill ---
+  const tl = gsap.timeline({ paused: true, defaults: { ease: 'loader2' } });
+  if (mask) tl.to(mask, { scaleX: 0, duration: 0.35 }); // L->R reveal
+  if (pill) tl.to(pill, { autoAlpha: 1, duration: 0.25 }, '>-0.05');
+
+  // --- Scroll trigger (use wrapper for reliable bounds on iOS) ---
   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;
+    const video = videoElements.length ? videoElements[0] : null;
+    if (!video) return;
 
-    videoElement.addEventListener('loadeddata', () => {
-      videoElement.pause();
-    });
+    // Safari compositing hints
+    video.style.transform = 'translateZ(0)';
+
+    const hoverIN = () => video.play();
+    const hoverOUT = () => { video.pause(); /* video.currentTime = 0; */ };
 
+    video.addEventListener('loadeddata', () => { video.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();
+    // Mobile: poster-only, but keep sources on Android; replace with <img> on iOS
+    Array.from(videoElements).forEach((v) => {
+      const poster = v.getAttribute('poster');
+
+      if (isIOS && poster) {
+        const img = new Image();
+        img.src = poster;
+        img.alt = '';
+        img.className = v.className;
+        // Keep sizing from CSS on wrapper; this prevents 0-height glitches
+        v.replaceWith(img);
+      } else {
+        // Android: keep sources to preserve intrinsic size and poster rendering
+        v.removeAttribute('autoplay');
+        v.pause();
+        v.preload = 'none';
+        // v.load(); // enable only if you notice stale frames
+      }
     });
   }
+
+  // After layout settles (posters/images), refresh triggers
+  setTimeout(() => ScrollTrigger.refresh(), 120);
 };
 
+
+
   // Reviews slider
   window.reviewsSlider = function(e) {
     // Put content of static slide into list
@@ -2023,6 +2207,7 @@ window.closeInfoBar = function() {
       lenis.destroy();
     }
     customGsapEasing();
+
     reloadOnBack();
     revealFooter();
     pageLoadAnimation();
@@ -2031,4 +2216,5 @@ window.closeInfoBar = function() {
     contactFormOpenAnimation();
     disableScrollMenu();
     scrollToHashOnLoad();
+    initClientLogosAnimation();
   });