JSFiddle - React, Tailwind, and code Playground

by Alen Doe

HTML

<div id="num-1">0</div>
<div id="num-2">~15</div>
<div id="num-3">~-30</div>

JavaScript

$.Tween.propHooks.number = {
    get: function ( tween ){
        var num = tween.elem.innerHTML.replace(/^[^\d-]+/, '');
        return  parseFloat(num) || 0;
    },
    
	set: function( tween ) {
        var opts = tween.options;
        tween.elem.innerHTML = (opts.prefix || '')
        + tween.now.toFixed(opts.fixed || 0)
        + (opts.postfix || '');
	}
};


$('#num-1').animate({ number: 100 }, 'slow');

$('#num-2')
    .delay(500)
    .animate({ number: 57 }, {
        duration: 2000,
        prefix: '~'
    })
;


$('#num-3')
.delay(2000)
.animate({ number: 95 }, {
    duration: 5000,
    prefix: '~',
    postfix: '%',
    fixed: 3
});