https://ev.be/ui/sapphire/article-templates/counters/counters.js?rev=d3GZSknDjOc

1require(['domReady', '/ui/sapphire/droplets/countUp/countUp.js'],
2    function (domReady, countUp) {
3        'use strict';
4
5        /** @param {Object} */
6        let elements = {};
7
8        let options = {
9            useEasing: true,
10            useGrouping: true,
11            separator: '.'
12        };
13
14        function init() {
15            collectDomElements(elements);
16            revealcounters();
17            // initFigures();
18
19            /* Attach event handlers to resize and scroll event */
20            window.addEventListener('resize', revealcounters, false);
21            window.addEventListener('scroll', revealcounters, false);
22        }
23
24        /**
25         * Collect all DOM elements that need javascript interaction
26         * @param {Object} elements
27         * @param {NodeList} elements.counters
28         * * @param {NodeList} elements.numbers
29         */
30        function collectDomElements(elements) {
31            elements.counters = document.querySelectorAll('.at-counters.--countUp');
32            elements.numbers = document.querySelectorAll('.at-counters__counter');
33        }
34
35        function revealcounters() {
36            let length = elements.counters.length;
37
38            for (let count = 0; count < length; count++) {
39                /* offsetParent may not be the body if the element container is positioned. Therefore we need to find the distance from the body by adding all the offsetTop's of all offsetParent's.  */
40                let offsetParentTop = 0;
41                let temp = elements.counters[count];
42                do {
43                    if (!isNaN(temp.offsetTop)) {
44                        offsetParentTop += temp.offsetTop;
45                    }
46                } while (temp === temp.offsetParent);
47                let pageYOffset = window.scrollY;
48                let viewportHeight = window.innerHeight;
49                if (offsetParentTop < pageYOffset + viewportHeight) if (!elements.counters[count].classList.contains('at-counters--visible')) {
50                    elements.counters[count].classList.add('at-counters--visible');
51                    initFigures(elements.counters[count]);
52                }
53            }
54        }
55
56        function initFigures(element) {
57            let numbers = element.querySelectorAll('.at-counters__counter');
58
59            for (let i = 0; i < numbers.length; i++) {
60                let value = numbers[i].getAttribute('data-number');
61                let number = new CountUp(numbers[i], 0, value, 0, 2.5, options);
62
63                if (!number.error) {
64                    number.start();
65                } else {
66                    console.error(number.error);
67                }
68            }
69        }
70
71        domReady(init);
72    });