CountUp.js is a dependency-free, lightweight Javascript class that can be used to quickly create animations that display numerical data in a more interesting way. For more info see
the official siteand
the Github repository.
Usage
CountUp.js's style and script bundles are separate from our global bundle and required to be included and initialized manually on related pages.
CountUp's Javascript is globally initialized with our
KTAppwrapper defined in
src/js/components/app.jswithin the
initCountUpand
initCountUpTabsfunctions.
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
loopparameters 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.
Markup Reference
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
Name
Type
Description
data-kt-countup
mandatory
Enables the current element as the CountUp wrapper component. Accepts
trueor
falsevalues.
data-kt-countup-value
mandatory
Defines the number that CountUp will count to. Accepts any integer values.
data-kt-countup-start-val
optional
Defines the starting number for CountUp. Accepts any integer values.
data-kt-countup-duration
optional
Defines the duration it takes to animate the numbers from start to end in ms. Accepts positive integer values.
data-kt-countup-separator
optional
Defines the grouping separator(e.g: ',').
data-kt-countup-decimal-places
optional
Defines the numeric decimal places. Accepts positive integer values.
data-kt-countup-prefix
optional
Defines the prefix character that will appear before CountUp (e.g. "$"). Accepts string values.
data-kt-countup-suffix
optional
Defines the suffix character that will appear after CountUp (e.g. "+"). Accepts string values.
Visit CountUp.js's
official docsto learn the plugin API. This example shows how to reinitialize CountUp instance with a new value and settings in order to update the value.
var button = document.querySelector("#kt_countup_update");
const count1 = new countUp.CountUp("kt_countup_1");
const count2 = new countUp.CountUp("kt_countup_2");
const count3 = new countUp.CountUp("kt_countup_3");
button.addEventListener("click", function() {
count1.update(1000);
count2.update(200);
count3.update(300);
});
Within Tabs
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.