https://weasy.io/_inc/global_assets/counterupv2/multi-animated-counter.js

1$(function () {
2
3    // ! Counter (used for Social Proof)
4
5    /* Usage example
6        <div id="counters_1">
7            <div ="counter" data-TargetNum="10" data-Speed="6000"></div>
8            <div class="counter" data-TargetNum="7" data-Speed="7000" 
9            data-Direction="reverse" data-Easing="linear"></div>
10            <div class="counter" data-TargetNum="80333" data-Speed="2500">0</div>
11        </div>
12        <div id="counters_2">
13            <div class="counter" data-TargetNum="4200" data-Speed="1000">0</div>
14            <div class="counter" data-TargetNum="4500" data-Speed="4000">0</div>
15            <div class="counter" data-TargetNum="4743">0</div>
16        </div>
17        <div id="counters_3">
18            <div class="counter" data-TargetNum="5200" data-Speed="1000">0</div>
19            <div class="counter" data-TargetNum="5500" data-Speed="4000">0</div>
20            <div class="counter" data-TargetNum="5743">0</div>
21        </div>
22    
23       Required attr: data-TargetNum
24       Optionals attr: data-Speed(milisecons), data-Direction(reverse), data-Easing(linear, swing)
25
26       **CONFIG**
27       Please set a the ID's to watch, a class for all counters and a default speed
28
29       Avoid to use this script in pages where it isn't needed
30    */
31
32    // CONFIG
33    // let visibilityIds = ['#counters_1', '#counters_2', '#counters_3']; //must be an array, could have only one element
34//    let visibilityIds = ['.omw-counterupv2']; //must be an array, could have only one element
35    let visibilityIds = []; //must be an array, could have only one element
36    $("[module='counterupv2']").each(function(){
37      visibilityIds.push("#"+$(this).attr("id"));
38    });
39    let counterClass = '.counterv2';
40    let defaultSpeed = 3000; //default value
41
42    // END CONFIG
43
44    //init if it becomes visible by scrolling
45    $(window).on('scroll', function () {
46        getVisibilityStatus();
47    });
48
49    //init if it's visible by page loading
50    getVisibilityStatus();
51
52    function getVisibilityStatus() {
53        elValFromTop = [];
54        var windowHeight = $(window).height(),
55            windowScrollValFromTop = $(this).scrollTop();
56
57        visibilityIds.forEach(function (item, index) { //Call each class
58            try { //avoid error if class not exist
59                elValFromTop[index] = Math.ceil($(item).offset().top);
60            } catch (err) {
61                return;
62            }
63            // if the sum of the window height and scroll distance from the top is greater than the target element's distance from the top, 
64            //it should be in view and the event should fire, otherwise reverse any previously applied methods
65            if ((windowHeight + windowScrollValFromTop) > elValFromTop[index]) {
66                counter_init(item);
67            }
68        });
69    }
70
71    function counter_init(groupId) {
72        let num, speed, direction, index = 0;
73        $(counterClass).each(function () {
74            num = $(this).attr('data-TargetNum');
75            speed = $(this).attr('data-Speed');
76            direction = $(this).attr('data-Direction');
77            easing = $(this).attr('data-Easing');
78            if (speed == undefined) speed = defaultSpeed;
79            $(this).addClass('c_' + index); //add a class to recognize each counter
80            doCount(num, index, speed, groupId, direction, easing);
81            index++;
82        });
83    }
84
85    function doCount(num, index, speed, groupClass, direction, easing) {
86        let className = groupClass + ' ' + counterClass + '.' + 'c_' + index;
87        if(easing == undefined) easing = "swing";
88        $(className).animate({
89            num
90        }, {
91            duration: +speed,
92            easing: easing,
93            step: function (now) {
94                if (direction == 'reverse') {
95                    $(this).text(num - Math.floor(now));
96                } else {
97                    $(this).text(Math.floor(now));
98                }
99            },
100            complete: doCount
101        });
102    }
103})