Jump to content
Search Community

Count Up - tween animates faster at the beginning.

FDCH test
Moderator Tag

Recommended Posts

Hello everybody :) 

short question, im pretty sure there is an easy fix, which I just can't figure out.

I need to count up and iterate some Numbers, but the first count from 0 to 1 is way faster then the rest.
It should be a monotonous count. In my example i tried it with delay and duration, but same result.
Appreciate your help!
Thank you and best regards
Fabio 

See the Pen NWwaEvz by FDCH (@FDCH) on CodePen

Link to comment
Share on other sites

Hi @FDCH

 

Thanks for the demo. This is an interesting challenge.

 

Just to get it out of the way, i wouldn't recommend having 2 tweens animate the same value at the same time. I suspect that was just part of some experimenting.

 

The core issue here is that Math.round() is going to force val 0 to round to 1 once it reaches 0.5

 

so the number 0 will only display from 0 > 0.49999

but 1 will display from 0.5 > 1.499999

 

See the discrepancy? With a linear ease with 1 second to display each number, 0 only has half a second to display while 1 (and all the other numbers) have a full second to display. 

 

If you use Math.floor() you can see a val of 0 between 0 > 0.999999

and then 1 will display from 1 > 1.99999

 

Then you will have your even distribution, however keep in mind that the very instant you reach you end value of 5, then the tween will instantly repeat, so you may want a repeatDelay too like:

 

See the Pen RwjLEmO by snorkltv (@snorkltv) on CodePen

 

 

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...