@widelab-nc/widelab 1.1.32 → 1.1.34

package/package.json

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

@@ -1324,6 +1324,73 @@ window.heroSliders = function(e) {
 }
 
 
+// Splide without GSAP; pagination inserted as first child INSIDE .splide
+window.awwwardsSliders = function (el) {
+  if (el.dataset.splideInitialized === '1') return;
+
+  // 1) Find or create Splide root
+  let root = el.classList?.contains('splide') ? el : el.closest?.('.splide');
+  const track = el.querySelector?.('.splide__track') || el.closest?.('.splide__track');
+
+  if (!root && track) {
+    root = document.createElement('div');
+    root.className = 'splide testimonial';
+    track.parentNode.insertBefore(root, track);
+    root.appendChild(track);
+  }
+
+  // 2) Validate structure
+  if (!root || !root.querySelector('.splide__track') || !root.querySelector('.splide__list')) {
+    console.warn('[awwwardsSliders] Missing required Splide structure.');
+    return;
+  }
+
+  // 3) Splide config
+  const config = {
+    type: 'loop',
+    perPage: 1,
+    perMove: 1,
+    gap: '0px',
+    arrows: false,
+    pagination: true,
+    drag: false,
+    speed: 300,
+    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+    classes: {
+      pagination: 'splide__pagination awwwards-pagination',
+      page: 'splide__pagination__page awwwards-page',
+    },
+    breakpoints: {
+      992: { drag: true },
+    },
+  };
+
+  const splide = new Splide(root, config).mount();
+
+  // 4) Move pagination INSIDE .splide as FIRST child
+  splide.on('pagination:mounted', (data) => {
+    const list = data.list;
+    if (list && root.firstChild) {
+      root.insertBefore(list, root.firstChild);
+    }
+  });
+
+  // Fallback if pagination already exists
+  queueMicrotask(() => {
+    const list = root.querySelector('.splide__pagination');
+    const track = root.querySelector('.splide__track');
+    if (list && track && list.nextSibling !== track) {
+      root.insertBefore(list, track);
+    }
+  });
+
+  // 5) Click-to-next on desktop
+  if (window.innerWidth > 992) {
+    root.addEventListener('click', () => splide.go('+1'));
+  }
+
+  el.dataset.splideInitialized = '1';
+};
 
 // Sliders on Services page
 window.servicesSliders = function(e) {
@@ -1364,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