# Counters

Animates a counter up to a given value. Can also count in reverse.

###

About the Plugin

Website GitHub npm

Counters are handled by the countup.js library.

Our script provides a wrapper to the countup.js library allowing options to be specified as data attributes on counter elements.

Our wrapper works in conjunction with scrollMonitor to begin counting when the element is scrolled into view.

Despite its name, CountUp can count in either direction, depending on the parameters passed in.

###

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

1. ###### Load the initializer code in `index.js`

   Countup is distributed as a CommonJS module, and must be embedded in theme.js. The import statement to embed the library is in `js/mrare/countup.js`.

   - Declare the following import statement in `js/mrare/index.js`. This ensures that the initializer code and CountUp library is included in the `theme.js` bundle.

         import mrCountup from './countup';

   - Ensure the following line appears in the `export` object:

         export {
         mrCountup,
         };

###

Basic Usage

Counters are initialized by data-attributes on page load.

Add the `data-countup` attribute to initialize the element as a counter.

By default, the counter will use the element's text and count up to that value from zero. The text is parsed by the javascript `parseFloat` function, so you may use a decimal or integer.

    <span data-countup>1234</span>

###

Advanced Usage

Counters are initialized by data-attributes on page load.

Add the `data-countup` attribute to initialize the element as a counter.

    <span data-countup data-start="0" data-end="100" data-duration="4" data-suffix="%">0%</span>

Data attribute | Default | Usage
--- | --- | ---
`data-start` | `0` | Value to start counting from. May be decimal value.
`data-end` | Text of element | Value to end counting at. May be decimal value.
`data-duration` | `2.5` | Length of time (seconds) to animate over
`data-grouping` | `false` | Whether to display a comma in thousands eg. 1,234
`data-separator` | `,` | Character to use as a separator in thousands
`data-decimal-character` | `.` | Character to use as a decimal point
`data-decimal-places` | `0` | How many places to show after the decimal point
`data-prefix` | `""` | Text to add before the count
`data-suffix` | `""` | Text to add after the count eg. "%"
`data-easing` | `true` | To disable easing, use `"false"`