Copy link to clipboard
Copied
Hi all,
We're trying to create a simple counter in HTML5, but all I find online is AS3...
We need the numbers to go from 10.000 -> 50.000
Is it possible?
Thanks for your help!
var start = 10000;
var end = 50000;
var current = start;
var f = tickerF.bind(this)
createjs.Ticker.addEventListener('tick',f);
function tickerF(){
this.your_tf.text = current;
current++;
if(current>end){
createjs.Ticker.removeEventListener('tick',f);
}
}
Copy link to clipboard
Copied
you want something that you click (up or down) to increment or decrement a display?
Copy link to clipboard
Copied
No, just the running numbers automatically
Copy link to clipboard
Copied
what are "..running numbers.."?
do you want something that displays numbers incrementing from 10,000 to 50,000 over some time period?
Copy link to clipboard
Copied
Haha exactly
Thank you for your help!
Copy link to clipboard
Copied
var start = 10000;
var end = 50000;
var current = start;
var f = tickerF.bind(this)
createjs.Ticker.addEventListener('tick',f);
function tickerF(){
this.your_tf.text = current;
current++;
if(current>end){
createjs.Ticker.removeEventListener('tick',f);
}
}
Copy link to clipboard
Copied
THANK YOU !!!
Is there a way to control the speed? To make it go faster?
Thanks!
Copy link to clipboard
Copied
you're welcome.
you can increase your framerate:
Ticker.framerate = 60;
or you can increment by 2's or 3's etc
Copy link to clipboard
Copied
As always, directly tweaking Ticker.framerate is not advisable because that overrides the frame rate set in the publish settings.
Copy link to clipboard
Copied
Thank you kglad - your code really helped.
BTW we were able to control the speed by changing the:
current++; to current = current+7; (could be any number)
Copy link to clipboard
Copied
you're welcome.
Copy link to clipboard
Copied
Hi, thank you for your code, is there a way to set the speed by second using this code? or there is a spesicif number per second? thanks in advance.
Copy link to clipboard
Copied
yes. use setInterval instead of ticker.
yes, use setInterval and adjust the interval.
Copy link to clipboard
Copied
Hi kglad,
I'm trying to use your counter in a a animate CC project using gsap. The counter works fine, but I need to be able to delay the starttime for the counter, as I want it to sync with an animation. Is this possible? Thx
Copy link to clipboard
Copied
add the listener when you want the timer to start.
Copy link to clipboard
Copied
So easy when you know how Thanks a lot!
Copy link to clipboard
Copied
Sorry - me again. Is there a way to use the counter twice (e.g. reset it and run it again). Thx so much for your help
Copy link to clipboard
Copied
call startTickerF whenever you want to start the ticker:
var start;
var end:
var f =tickerF.bind(this);
var current;
startTickerF(10000,50000); // edit this line to adjust for your start and stop numbers
function startTickerF(startNum,endNum){
start= startNum;
end = endNum;
current = start;
createjs.Ticker.addEventListener('tick',f);
}
function tickerF(){
this.your_tf.text = current; // do whatever with your current number
current++;
if(current>end){
createjs.Ticker.removeEventListener('tick',f);
}
}
Copy link to clipboard
Copied
Thank you sp much. When adding the code, the project won't run. However, if I remove the line "startTicker(10000,50000); // edit this line to adjust for your start and stop numbers", the project runs, but counter doesn't work. Any thoughts? Thx
Copy link to clipboard
Copied
there's a typo. that should be
startTickerF(10000,50000);
Copy link to clipboard
Copied
That did the trick. Thank you!
Copy link to clipboard
Copied
you're welcome.
(p.s when using the adobe forums, please mark helpful/correct responses, if there are any.)
Copy link to clipboard
Copied
Hello, I come to you after seeing this answer which was very useful to me.
I would like to know if it was possible to have an Ease on the counter animation?
Thanks in advance