Counter Animation - By Thunderfoot

Example 1:

No HTML attributes

JS Class Configuration options:

elements: document.querySelectorAll(".example-1")
regionFormat: "en-US"
duration: 1
scrollStart: "center"


                document.querySelectorAll(".example-1").forEach((element) => {

                  new CounterAnimation({

                    element: element,

                    regionFormat: "en-US",

                    separator: ",",

                    duration: 1.5,

                    scrollStart: "center",

                  });

                });

20,000M invested

20,000,000 houses protected

Example 2:

HTML attributes

first number (20.000) → data-counter-duration="5"
second number (20.000.000) → data-counter-duration="3"

JS Class Configuration options:

elements: document.querySelectorAll(".example-2")
regionFormat: "es-ES"
separator: "."


                document.querySelectorAll(".example-1").forEach((element) => {

                  new CounterAnimation({

                    element: element,

                    regionFormat: "es-ES",

                    separator: ".",

                  });

                });

20.000$

20.000.000$ inverted