Counter-Up
Counter-Up copied to clipboard
Support Exponential Counter
I love this library.
Could we support exponential counting so the numbers look like they are accelerating faster as time goes by giving the user a perception of faster experience?
0, 1, 2, 4, 8, 16, 32... 1024
To do this we would have to replace parseInt(num / divisions * i)
with a Math.Log
function
Maybe a custom countCallback(int) -> int
?
Unfortunately callback is only called at the end. For something like this, we would need to provide a custom delay function, which can be tweaked to some easing formula with the parameter divisions.
I've made simple tweaks to the library to allow easing functions, here is an example:
jquery.counterup.js
...
var step = 0;
var easing = 'easeInOutQuint';
var f = function () {
step++;
var progress = step / divisions
var delay = easings[easing](progress);
delay = parseFloat(delay.toFixed(2));
delay = delay * 20; // tends to 20 ms
...
if ($this.data('counterup-nums').length) {
setTimeout($this.data('counterup-func'), delay);
}
...
where easings
is any of the jquery easings formulas, or even your own
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js
@weisk so i need jquery easings as a dependency now? Or can I just declare my own?
@luckydonald you don't really need it as a dependency, open the file, and grab the formula for the easing you want