Animation Counter Javascript

Updated: 22 September 2022

The following javascript code serves to display a running calculated number. I use this script when helping the https://oeko-reiner.de project that uses Oxygen Builder

Example results

Counter Animation

Javascript

jQuery({ Counter: 4000 }).animate({
  Counter: jQuery('.counter').text()
}, {
  duration: 15000,
  easing: 'swing',
  step: function() {
    jQuery('.counter').text(Math.ceil(this.Counter).toLocaleString('de'));
  }  
});

HTML

<div>
 <p class="counter">2500</p>
</div>

Notes

counter: 4000 is the last number to go to, starting from the number we made, which is 2500.

.counter is a class that we add to the number as the target script marker.

duration: 15000 is the time it takes to finish the animation, which is 15000 ms or 15 seconds.

easing: swing is the animation model used (see: https://jqueryui.com/easing/ ).

.toLocaleString ('de') is a code to change numbers following the German standard (Deutsch), in this case what the client needs is separating thousands of numbers with dots. For the standard of other countries, the separator of the thousands is comma.

Animation Number Running On Specific Viewport

When working on https://confidia.de/steuerberatung, there is a need for animation to run if the section containing the number appears in the viewport because the position of the number is slightly down the page.

For that we use waypoint.js and CounterUp2.js to enable animation when the number/section is visible on the screen.

Counter Animation start from spesific point

<!-- load waypoint and counterup2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/counterup2/2.0.2/index.js"></script>

<!-- html code -->
<span class="counter">9</span>

/** https://codepen.io/mnunes/pen/RXQqXz **/

jQuery( document ).ready( function() {
	
	jQuery(function ($) {
    	"use strict";
    
    	var counterUp = window.counterUp["default"]; // import counterUp from "counterup2"
    
    	var $counters = $(".counter");
    
    	/* Start counting, do this on DOM ready or with Waypoints. */
		$counters.each(function (ignore, counter) {
			var waypoint = new Waypoint( {
				element: $(this),
				handler: function() { 
					counterUp(counter, {
						duration: 5000,
						delay: 16
					}); 
					this.destroy();
				},
				offset: 'bottom-in-view',
			} );
		});

	});
 });