Tween number from 0 - 500 using endArray?

[DeltaFrog]

I'm just looking for the best way to tween a number from 0 - 500 and display the counting in html, kinda like a preloader animation. Can someone point me in the right direction? Is that something I can do using endArray?

[GreenSock]

You don't need to use endArray - just do something like this:

 

var obj = {value:0},
   element = document.getElementById("trace");
TweenMax.to(obj, 10, {value:500, roundProps:"value", ease:Linear.easeNone, onUpdate:function() {
   element.innerHTML = obj.value;
}});

 

Drop a div into your HTML and give it the name "trace" and you should see the number animating up from 0 to 500. Is that what you wanted?

[DeltaFrog]

Can't thank you enough Jack, I'm a bit new to html and Java script so I'm still a bit confused. Below is the div I want to display the number in.

 

Do I need to add a <p> tag to my html? This is what I have currently: <div id="data-rate"></div>

 

Should I replace "trace" with my div id "data-rate"?

[GreenSock]

Yep, just replacing "trace" with "data-rate" should do it, but let us know if you run into trouble. I know it can be a little confusing at times when you're shifting from Flash to HTML5/JS. It'll get easier fast - just stick with it.

[DeltaFrog]

Hmm now my chrome/developer tools/console is returning a Uncaught ReferenceError: _tween is not defined

[GreenSock]

Ah, you've got a stale version of TweenMax (it's actually an old issue in RoundPropsPlugin). Please grab the pre-release one that I posted in this thread:

http://forums.greensock.com/topic/6870-few-problems-with-ie7-8-regarding-scaling-and-gradient/#entry25415

[DeltaFrog]

How would I add to the current value? For example if the number is currently 200 and I want to add 300 making it 500 how would I write that?

 

Something like:

TweenMax.to(obj, 3, {value:+500,...

 

 

Thank you Jack.

[DeltaFrog]

Ah obj.value+10 is working.

[GreenSock]

Just for the record, you could have done a relative tween like this:

 

TweenMax.to(obj, 3, {value:"+=10", ...