IntersectionObserver

assets/js/countUp.js

@@ -19,51 +19,29 @@ import { CountUp } from 'countup.js';
         countUpItems[el.id] = new CountUp(el.id, el.dataset.endval, options);
     });
 
-    function destroyCountUp(elID)
-    {
-        delete countUpItems.elID;
-    }
-
-    var latestKnownScrollY = 0;
-    var ticking = false;
-
-    function onScroll()
-    {
-        latestKnownScrollY = window.scrollY;
-        requestTick();
-    }
-
-    function requestTick()
-    {
-        if (!ticking) {
-            requestAnimationFrame(update);
-        }
-        ticking = true;
-    }
-
-    function update()
-    {
-        ticking = false;
-
-        Array.prototype.forEach.call(elements, function (el,i) {
-            if (true === isInViewport(el)) {
-                countUpItems[el.id].start(destroyCountUp(el.id));
+    let options = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 1.0
+    };
+
+    const callback = function (entries, observer) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                countUpItems[entry.target.id].start(destroyCountUp(entry.target));
             }
         });
-    }
+    };
 
-    requestAnimationFrame(update);
-    window.addEventListener('scroll', onScroll, false);
+    let observer = new IntersectionObserver(callback, options);
 
-    function isInViewport(el)
-    {
-        const rect = el.getBoundingClientRect();
-        return (
-            rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    Array.prototype.forEach.call(elements, function (el,i) {
+        observer.observe(el);
+    });
 
-        );
+    function destroyCountUp(el)
+    {
+        delete countUpItems[el.id];
+        observer.unobserve(el);
     }
 })();

src/Plenta/ContaoCountUpBundle/Resources/public/entrypoints.json

@@ -2,7 +2,7 @@
   "entrypoints": {
     "countup": {
       "js": [
-        "/bundles/contaocountup/countup.67ac75d9.js"
+        "/bundles/contaocountup/countup.4c790889.js"
       ]
     }
   }

src/Plenta/ContaoCountUpBundle/Resources/public/manifest.json

@@ -1,3 +1,3 @@
 {
-  "contaocountup/countup.js": "/bundles/contaocountup/countup.67ac75d9.js"
+  "contaocountup/countup.js": "/bundles/contaocountup/countup.4c790889.js"
 }