Counter-Up icon indicating copy to clipboard operation
Counter-Up copied to clipboard

Support Exponential Counter

Open abibell opened this issue 8 years ago • 5 comments

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

abibell avatar Jun 29 '16 00:06 abibell

Maybe a custom countCallback(int) -> int?

luckydonald avatar Dec 15 '16 12:12 luckydonald

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.

weisk avatar Feb 06 '17 11:02 weisk

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 avatar Feb 06 '17 12:02 weisk

@weisk so i need jquery easings as a dependency now? Or can I just declare my own?

luckydonald avatar Feb 11 '17 22:02 luckydonald

@luckydonald you don't really need it as a dependency, open the file, and grab the formula for the easing you want

weisk avatar Feb 12 '17 19:02 weisk