@widelab-nc/widelab 1.1.33 → 1.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widelab",
-  "version": "1.1.33",
+  "version": "1.1.35",
   "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

@@ -627,6 +627,52 @@ window.reviewsSlider = function(e) {
     });
   }
 
+// Partner slider
+window.partnerSlider = function (e) {
+  // Keep the same querySelector for consistency with teamSlider
+  const teamList = e.querySelector('.team_collection_list');
+
+  // Initialize Splide with drag restored
+  const splide = new Splide(e, {
+    type: 'slide',
+    fixedWidth: '20%',
+    padding: { left: '2.5rem', right: 0 },
+    focus: 0,
+    gap: 0,
+    pagination: true,
+    omitEnd: true,
+    arrows: false,
+    drag: true, // restored dragging
+    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+    snap: true,
+    classes: {
+      pagination: 'splide__pagination facts-pagination partner-bullets',
+      page: 'splide__pagination__page facts-page',
+    },
+    breakpoints: {
+      992: { fixedWidth: '40%', padding: { left: '1.75rem' }, drag: 'free', snap: false },
+      560: { fixedWidth: '75%', padding: { left: '1.375rem' }, drag: 'free', snap: false },
+    },
+  });
+
+  splide.mount();
+
+  // Removed: click-to-next handler
+
+  // GSAP in-view animation
+  gsap.from(e, {
+    scrollTrigger: {
+      trigger: e,
+      start: 'top bottom',
+      end: 'bottom bottom',
+      scrub: 1,
+      once: true,
+    },
+    x: '10%',
+    opacity: 0,
+    ease: 'linear',
+  });
+};
   // Element padding change on scroll
   window.elementPaddingChange = function(e) {
     gsap.to(e, {
@@ -1431,6 +1477,161 @@ 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);
+
+  // Helper: pause all other videos
+  const pauseAll = (except) => {
+    vids.forEach(v => {
+      if (v !== except) {
+        v.pause();
+        v.muted = true;
+        const parent = v.closest('.partner_item');
+        if (parent) toggleIcons(parent, false);
+      }
+    });
+  };
+
+  // Helper: toggle play/pause icons
+  function toggleIcons(item, isPlaying) {
+    const playIcon = item.querySelector('.is-play');
+    const pauseIcon = item.querySelector('.is-pause');
+    if (isPlaying) {
+      if (playIcon) playIcon.style.display = 'none';
+      if (pauseIcon) pauseIcon.style.display = 'block';
+    } else {
+      if (playIcon) playIcon.style.display = 'block';
+      if (pauseIcon) pauseIcon.style.display = 'none';
+    }
+  }
+
+  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;
+
+    // Default state on init (show play icon)
+    toggleIcons(item, false);
+
+    // Handle click (play/pause toggle)
+    item.addEventListener('click', () => {
+      if (v.paused) {
+        pauseAll(v);
+        v.muted = false;
+        v.play();
+        toggleIcons(item, true);
+      } else {
+        v.pause();
+        toggleIcons(item, false);
+      }
+    });
+
+    // Handle pause and ended (ensure icons reset)
+    v.addEventListener('pause', () => toggleIcons(item, false));
+    v.addEventListener('ended', () => toggleIcons(item, false));
+    v.addEventListener('play', () => toggleIcons(item, true));
+  });
+
+  // Pause videos when out of viewport
+  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();
+          toggleIcons(target, false);
+        }
+      });
+    },
+    { root: rootEl, threshold: 0.25 }
+  );
+
+  items.forEach((item) => io.observe(item));
+};
 
 
   // Case study - What's next interaction