Animate Numbers On Scroll with the CounterUp.js Library

Preview:

Description:

CounterUp.js is a lightweight JavaScript library that creates animated counting effects when numbers appear in the viewport.

It uses the IntersectionObserver API to monitor your counter’s visibility. When a counter appears on the screen, the library starts an animation that updates the number display using requestAnimationFrame.

See it in action:

How to use it:

1. Download CounterUp.js and import it as a module to your project.

<script type="module">
  import CounterUp from './CounterUp.js';
</script>

2. Wrap the number you want to animate within a div element with a class, for example, counter:

<div class="counter">123,456</div>

3. Initialize CounterUp.js with the class selector and configuration options:

const counter = new CounterUp('.counter', {
  // options here
});

4. Available options to config the counting effect:

const counter = new CounterUp('.counter', {
  // Total animation duration in ms
  duration: 800,
  // Easing function (easeLinear, easeInQuad, easeOutExpo, etc.)
  easing: 'easeOutExpo', 
  // Offset for IntersectionObserver
  offset: '0%', 
  // Default changed to false - restart on each scroll into view
  once: false, 
  // Number of decimal places (null = auto-detect)
  decimals: null,
  // Thousands separator
  separator: ',',
  // Prefix (e.g., '$')             
  prefix: '',
  // Suffix (e.g., '%')
  suffix: ''
});

5. API methods.

// Change configuration dynamically
updateOptions(options);
// Reset and restart all animations and observers
restart();
// Replay animations without resetting observers
replay();
// Remove observers and clean up resources
destroy();