@widelab-nc/widelab 1.1.38 → 1.1.39

package/package.json

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

package/src/index.js

@@ -204,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) => {
@@ -263,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,})
@@ -531,110 +532,88 @@ 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) {
   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
+  const triggerEl = e.querySelector('.portfolio_item_image-wrapper') || e;
 
-  // --- iOS detection (reliable enough for layout fallbacks) ---
-  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+  // iOS detection for safe 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
+  // --- Initial states ---
+  if (pill) gsap.set(pill, { autoAlpha: 0 });
   if (mask) {
-    // Use transform-based reveal, much more reliable on iOS
+    // 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: 'left center',
+      transformOrigin: 'right center',
       willChange: 'transform'
     });
   }
 
-  // Timeline: mask reveal -> pill fade-in
+  // --- Timeline: mask reveal then pill ---
   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');
-  }
+  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, not absolute mask)
+  // --- Scroll trigger (use wrapper for reliable bounds on iOS) ---
   ScrollTrigger.create({
     animation: tl,
     trigger: triggerEl,
     start: 'top 80%',
-    once: true
+    once: true,
   });
 
   // --- 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;
 
-    // Force Safari compositing on the video
-    videoElement.style.transform = 'translateZ(0)';
+    // Safari compositing hints
+    video.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();
-    });
+    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);
 
   } else {
-    // Mobile
+    // 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) {
-        // 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';
-        }
+      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 poster only, but DON'T remove sources (some browsers need metadata for sizing)
+        // Android: keep sources to preserve intrinsic size and poster rendering
         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
+        // v.load(); // enable only if you notice stale frames
       }
     });
   }
 
-  // After images/posters load, refresh ScrollTrigger (prevents late layout causing missed triggers)
-  // Safe to call; GSAP debounces
-  setTimeout(() => ScrollTrigger.refresh(), 100);
+  // After layout settles (posters/images), refresh triggers
+  setTimeout(() => ScrollTrigger.refresh(), 120);
 };
 
 
 
-
   // Reviews slider
   window.reviewsSlider = function(e) {
     // Put content of static slide into list