Counter-Up2

Example Pen: https://codepen.io/bfintal/pen/zYzOGpZ

Counter-Up is a lightweight (only 1.3kb gzipped) module with zero dependencies that counts up to a targeted number when the number becomes visible.

What Can You Count Up?

• Floats: 1.234
• Integers: 1234
• With commas: 1,234.56
• Commas and dots: 12.345,67
• With non-numeric characters: $1,234.56
• Multiple countable values: 604,800 seconds in 10,080 minutes in 168 hours in 7 days

Usage

Usage as Module

Install

npm install --save counterup2

HTML

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

JS

Importing as a module will import the modern JavaScript code.

import counterUp from 'counterup2'

const el = document.querySelector( '.counter' )

// Start counting, do this on DOM ready or with Waypoints.
counterUp( el, {
    duration: 1000,
    delay: 16,
} )

If you want to stop the counter immediately:

// Stop counting. This brings back the original value.
counterUp( el, { action: 'stop' } )

Usage in Browser

Example Pen: https://codepen.io/bfintal/pen/zYzOGpZ

HTML

<script src="https://unpkg.com/[email protected]/dist/index.js">	</script>

<div class="counter">1,123,456.78</div>

JS

const { counterUp } = window.counterUp

const el = document.querySelector( '.counter' )

// Start counting, typically you need to call this when the 
// element becomes visible, or whenever you like.
counterUp( el, {
    duration: 5000,
    delay: 16,
} )

CDN

• https://unpkg.com/[email protected]/dist/index.js

Triggering the Counter

It is up to you to perform the triggering on when to start the count up. Here are some common ways on how to do it:

Trigger when the element becomes visible with Intersection Observer

Example Pen: https://codepen.io/bfintal/pen/zYzOGpZ

const callback = entries => {
	entries.forEach( entry => {
		const el = entry.target
		if ( entry.isIntersecting ) ) {
			counterUp( el, {
				duration: 2000,
				delay: 16,
			} )
		}
	} )
}

const IO = new IntersectionObserver( callback, { threshold: 1 } )

const el = document.querySelector( '.counter' )
IO.observe( el )

Trigger when the element becomes visible with Waypoints

The counting is performed when counterUp is called. To make the counting start when the element becomes visible, use a visibility library like Waypoints

For example:

// On DOM ready.
require( 'waypoints/lib/noframework.waypoints.js' )
const el = document.querySelector( '.counter' )
new Waypoint( {
    element: el,
    handler: function() { 
        counterUp( el ) 
        this.destroy()
    },
    offset: 'bottom-in-view',
} )

Footnotes

An improvement to https://github.com/bfintal/Counter-Up