For more info see the official siteand the Github repository.
CountUp.js's style and script bundles are separate from our global bundle and required to be included and initialized manually on related pages.
To include CountUp into your project, you need to include a HTML attribute data-kt-countup="true" within the CountUp element along with the value that it will be counting to with data-kt-countup-value. For more options available, such as loop parameters and more, please refer to the options below.
CountUp instances can also be controlled programmatically. For more information on Smooth Scroll's other options, please refer to the official plugin site.
CountUp uses HTML attributes to set specific configurations. Here are some references for each below. For complete list of options, please refer to the official documentation.
HTML Attribute references
Enables the current element as the CountUp wrapper component. Accepts true or false values.
Defines the number that CountUp will count to. Accepts any integer values.
Defines the starting number for CountUp. Accepts any integer values.
Defines the duration it takes to animate the numbers from start to end in ms. Accepts positive integer values.
Defines the grouping separator(e.g: ',').
Defines the numeric decimal places. Accepts positive integer values.
Defines the prefix character that will appear before CountUp (e.g. "$"). Accepts string values.
Defines the suffix character that will appear after CountUp (e.g. "+"). Accepts string values.
Here's a demo where CountUp will only start when visible within a tab container. Add data-kt-countup-tabs="true" next to the data-bs-toggle="tab" HTML attribute to define that the tab content has a CountUp element.