DXB CountTo

A vanilla JavaScript counter animation plugin with IntersectionObserver integration. This plugin is a replacement for jQuery-based counter plugins, with zero dependencies.

Features

• Pure vanilla JavaScript (ES2020+)
• Automatic animation when element becomes visible (using IntersectionObserver)
• Customizable animation speed and refresh interval
• Support for formatting options (decimals, thousands separator, prefix, suffix)
• Tiny footprint (~3KB minified)
• No dependencies
• Automatic initialization of new elements added to the DOM via MutationObserver

Installation

npm install dxb-count-to

Usage

Basic Usage

<div class="dxb-countto">
  <div data-from="0" data-to="500">0</div>
</div>

<script>
  // The counters are initialized automatically
  // No manual JavaScript required!
</script>

Advanced Usage

import { DXBCountTo, createDXBCountTo } from 'dxb-count-to';

// HTML structure:
// <div class="dxb-countto">
//   <div data-from="0" data-to="1000">0</div>
// </div>

// Initialize with options (if manual initialization is needed)
const counterElement = document.querySelector('.dxb-countto');
const counter = new DXBCountTo(counterElement, {
  from: 0,
  to: 1000,
  speed: 2000,
  refreshInterval: 50,
  decimals: 0,
  seperator: ',',
  prefix: '$',
  postfix: ' USD',
  formatter: function(value, options) {
    return options.prefix + value.toFixed(options.decimals).replace(
      /\B(?=(\d{3})+(?!\d))/g, 
      options.seperator
    ) + options.postfix;
  }
});

// Or use the factory function to create multiple counters at once
const counters = createDXBCountTo('.dxb-countto', {
  speed: 1500,
  seperator: ','
});

// Manually control the counter
counter.start();  // Start counting
counter.stop();   // Pause counting
counter.restart(); // Reset and start over
counter.toggle(); // Toggle between start/stop
counter.destroy(); // Clean up resources

Options

Option	Type	Default	Description
from	Number	0	The number to start counting from
to	Number	0	The number to count up to
speed	Number	1000	Duration of the animation in milliseconds
refreshInterval	Number	100	How often the counter is updated in milliseconds
decimals	Number	0	Number of decimal places to show
formatter	Function	null	Function to format the displayed value
seperator	String	''	Character to use as thousands separator
prefix	String	''	Text to display before the number
postfix	String	''	Text to display after the number
onUpdate	Function	null	Called each time the counter is updated
onComplete	Function	null	Called when the counter finishes

Data Attributes Support

You can configure the counter using data attributes on the inner element:

<div class="dxb-countto">
  <div data-from="0" 
      data-to="1000" 
      data-speed="2000" 
      data-refresh-interval="50" 
      data-decimals="0"
      data-seperator="," 
      data-prefix="$" 
      data-postfix=" USD">
    0
  </div>
</div>

Automatic Initialization

DXB CountTo automatically initializes in two ways:

1. On Page Load: When the page loads, all elements with the .dxb-countto class are automatically initialized.

   // This happens automatically when the script loads
   document.addEventListener('DOMContentLoaded', () => {
     DXBCountTo.initAll(); // Initialize all counters on the page
   });

2. Dynamic Content (MutationObserver): The plugin uses MutationObserver to detect when new counter elements are added to the DOM and automatically initializes them. This is particularly useful for:

   • Content loaded via AJAX
   • Elements inserted by JavaScript
   • Dynamic UI components

Element Selection

The plugin targets elements with the .dxb-countto class. The structure is:

<div class="dxb-countto">
  <div>0</div> <!-- This inner div will display the counter -->
</div>

Browser Support

Supports all modern browsers that support IntersectionObserver and ES2020+ features.

License

MIT