@widelab-nc/widelab 1.1.25 → 1.1.27

package/package.json

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

package/src/index.js

@@ -928,6 +928,8 @@ window.badgeColorChange = function(e) {
       }
   }
 
+
+
   // Stats section headline animation
   window.statsHeadlineAnimation = function() {
     const statsHeadlineAnimation = gsap.timeline({
@@ -992,7 +994,10 @@ window.counterUpAnimation = function() {
   });
 }
 
-// Sliders on Clients page
+
+
+
+
 window.heroSliders = function(e) {
   console.log("Initializing Splide on element:", e);
 
@@ -1016,6 +1021,67 @@ window.heroSliders = function(e) {
   const slider = new Splide(e, config).mount();
   console.log("Splide instance:", slider);
 
+  const descriptions = e.querySelectorAll('.slider-description');
+
+  // Set the initial state: Hide descriptions except the one in the active slide
+  descriptions.forEach(desc => {
+    if (!desc.closest('.splide__slide').classList.contains('is-active')) {
+      gsap.set(desc, { opacity: 0 });
+    }
+  });
+
+  if (window.innerWidth > 992) {
+    slider.on('click', function () {
+      slider.go('+1');
+    });
+  }
+
+  // Hide descriptions instantly on slide change
+  slider.on('move', function() {
+    gsap.set(descriptions, { opacity: 0 });
+  });
+
+  // Show description on new active slide
+  slider.on('active', function (slide) {
+    gsap.to(slide.slide.querySelectorAll('.slider-description'), { opacity: 1, duration: 0.15, ease: 'linear' });
+  });
+
+  gsap.from(e, {
+    scrollTrigger: {
+      trigger: e,
+      start: 'top bottom',
+      end: 'bottom bottom+=15%',
+      scrub: 1,
+      once: true,
+    },
+    x: '10%',
+    opacity: 0,
+    ease: 'linear',
+  });
+}
+
+
+
+// Sliders on Services page
+window.servicesSliders = function(e) {
+  const config = {
+    type: 'loop',
+    perPage: 1,
+    gap: 0,
+    arrows: false,
+    drag: false,
+    duration: 0.15,
+    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+    classes: {
+      pagination: 'splide__pagination services-pagination',
+      page: 'splide__pagination__page services-page',
+    },
+    breakpoints: {
+      992: { drag: true, fixedWidth: '90%' },
+      480: {},
+    },
+  };
+  const slider = new Splide(e, config).mount();
   if (window.innerWidth > 992) {
     slider.on('click', function () {
       slider.go('+1');