@widelab-nc/widelab 1.1.33 → 1.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widelab",
-  "version": "1.1.33",
+  "version": "1.1.34",
   "description": "Widelab starter template based on Finsweet template + add-ons.",
   "homepage": "https://widelab.co",
   "license": "ISC",
@@ -57,3 +57,4 @@
     "gsap": "npm:@gsap/shockingly@^3.12.5"
   }
 }
+

package/src/index.js

@@ -1431,6 +1431,132 @@ window.servicesSliders = function(e) {
   });
 }
 
+// Play-once timeline: children fade-in from bottom with stagger
+window.initBentoRevealTimeline = function (container) {
+  // Respect reduced motion
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    container.querySelectorAll(':scope > *').forEach(el => {
+      el.style.opacity = 1;
+      el.style.transform = 'none';
+    });
+    return;
+  }
+
+  const items = Array.from(container.children); // direct children only
+
+  // Set initial state
+  gsap.set(items, { opacity: 0, y: 24 });
+
+  // Build timeline that plays when scrolled into view
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: container,
+      start: 'top 80%',   // when top of container hits 80% of viewport
+      end: 'bottom 40%',  // not critical for play-only, but nice bounds
+      toggleActions: 'play none none none',
+      once: true
+    }
+  });
+
+  tl.to(items, {
+    opacity: 1,
+    y: 0,
+    duration: 0.6,
+    ease: 'power2.out',
+    stagger: 0.12
+  });
+};
+
+// Scrubbed timeline: progress tied to scroll progress
+window.initBentoRevealScrub = function (container) {
+  // Respect reduced motion
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    container.querySelectorAll(':scope > *').forEach(el => {
+      el.style.opacity = 1;
+      el.style.transform = 'none';
+    });
+    return;
+  }
+
+  const items = Array.from(container.children); // direct children only
+
+  // Important: define from state in timeline for scrub to interpolate smoothly
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: container,
+      start: 'top 90%',     // start easing in slightly later
+      end: 'bottom 65%',    // full reveal by near the end of container
+      scrub: 0.5,           // smoothing; use true for no smoothing
+        markers: false,     // uncomment for debugging
+    }
+  });
+
+  tl.fromTo(items,
+    { opacity: 0, y: 28 },
+    {
+      opacity: 1,
+      y: 0,
+      ease: 'power2.out',
+      // Duration is ignored by scrub; timeline length maps to scroll distance.
+      // Stagger distributes the items across the timeline for a nice cascade.
+      stagger: { each: 0.12 }
+    }
+  );
+};
+
+window.initPartnerVideos = function (container) {
+  const items = Array.from(container.querySelectorAll('.partner_item'));
+  const vids = items.map(i => i.querySelector('video')).filter(Boolean);
+
+  const pauseAll = (except) => {
+    vids.forEach(v => {
+      if (v !== except) {
+        v.pause();
+        v.muted = true;
+      }
+    });
+  };
+
+  items.forEach((item) => {
+    const v = item.querySelector('video');
+    if (!v) return;
+
+    v.controls = false;
+    v.loop = false;
+    v.muted = true;
+    v.setAttribute('playsinline', '');
+    v.playsInline = true;
+
+    item.addEventListener('click', () => {
+      if (v.paused) {
+        pauseAll(v);
+        v.muted = false;
+        v.play();
+      } else {
+        v.pause();
+      }
+    });
+  });
+
+  const rootEl =
+    document.querySelector('[data-scroll-root]') ||
+    document.querySelector('[data-smooth-scroll-root]') ||
+    null;
+
+  const io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach(({ isIntersecting, target }) => {
+        const v = target.querySelector('video');
+        if (!v) return;
+        if (!isIntersecting) v.pause();
+      });
+    },
+    { root: rootEl, threshold: 0.25 }
+  );
+
+  items.forEach((item) => io.observe(item));
+};
+
 
 
   // Case study - What's next interaction