@widelab-nc/widelab 1.1.30 → 1.1.32

package/package.json

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

package/src/index.js

@@ -1149,6 +1149,58 @@ window.formatCounter = function() {
   animateValue(88.0, 110.85, 3500);
 }
 
+// Filtering logic on Client's page - scroll trigger version
+window.formatCounterOnScroll = function() {
+  function format_number(x) {
+    let parts = x.toFixed(1).split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+    let formattedNumber = parts.join(".");
+    let digits = formattedNumber.split('').map(char => {
+      if (char === '.') {
+        return char;
+      } else {
+        return `<span class="single-number">${char}</span>`;
+      }
+    }).join('');
+    return digits;
+  }
+
+  function easeOutQuad(t) {
+    return t * (2 - t);
+  }
+
+  function animateValue(start, end, duration) {
+    const counter = document.getElementById('counter');
+    let startTimestamp = null;
+    const step = (timestamp) => {
+      if (!startTimestamp) startTimestamp = timestamp;
+      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+      const easedProgress = easeOutQuad(progress);
+      const currentValue = start + (end - start) * easedProgress;
+      counter.innerHTML = format_number(currentValue);
+      if (progress < 1) {
+        window.requestAnimationFrame(step);
+      }
+    };
+    window.requestAnimationFrame(step);
+  }
+
+  // Scroll trigger
+  const counterEl = document.getElementById('counter');
+  if (!counterEl) return;
+
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        animateValue(88.0, 110.85, 3500);
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.5 });
+
+  observer.observe(counterEl);
+};
+
 // GSAP Counter Up Animation onc Client's Page
 window.counterUpAnimation = function() {
 
@@ -1187,7 +1239,7 @@ window.counterUpAnimation = function() {
     window.requestAnimationFrame(step);
   }
 
-  animateValue(52.0, 56.2, 3500);
+  animateValue(88.8, 110.85, 3500);
 
 
   const counters = document.querySelectorAll('#counter');
@@ -1566,6 +1618,8 @@ window.closeInfoBar = function() {
 }
 
 
+
+
   // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
   window.Webflow ||= [];
   window.Webflow.push(() => {