Rolling number effect

[RockyW]

Hi All,

 

I'm new to AS and flash and trying to create a "Jackpot meter" looking signage which will display some dollar value. When value changes the number will be rolling towards to the new value.

 

Can anyone suggest any way to do this?

 

Thanks

[Shaun Gorneau]

Believe it or not, the trick here is the easing!

 

I did something similar to kind of give a "slot machine" rolling aesthetic to the end of a sentence here

 

See the Pen rLdqLY by sgorneau (@sgorneau) on CodePen

 

 

What you'd want to focus on is the

 

ease:  Elastic.easeInOut.config(8, 0)

 

 

For your case, "8" might be too much ... so modify that to get the right feel for your project.

 

[RockyW]

On 27/10/2017 at 7:48 PM, Shaun Gorneau said:

Believe it or not, the trick here is the easing!

 

I did something similar to kind of give a "slot machine" rolling aesthetic to the end of a sentence here

 

See the Pen rLdqLY by sgorneau (@sgorneau) on CodePen

 

What you'd want to focus on is the

 

ease:  Elastic.easeInOut.config(8, 0)

 

 

For your case, "8" might be too much ... so modify that to get the right feel for your project.

 

 

Thanks mate, that was what I'm looking for! 

 

I've tried to put the code into my project but seems like I can only get the animation done once, see below example code:

 

function IncreaseValue()
                                {
                                	//some process here to pass value to poolValue_mc.text;
                                
                                	TweenMax.to(poolValue_mc, 3,{y:1000,  ease: Elastic.easeInOut.config(0, 10)});
                                }

There is some other process to call this function every x seconds and I can see the value is keep changing but the animation, did I do anything wrong?

[Dipscom]

Hi @RockyW,

 

It's very hard to troubleshoot issues "in the dark", without the code in context. Could you set up a simple example of what you are trying to achieve?

 

 

There are several ways of triggering a function every X seconds. Some with plain JavaScript, some with GSAP but it will depend on what you are trying to achieve really.

 

Using the code you provided, one way to go about it would be:

 

function waitCall() {
  TweenMax.delayedCall(1, IncreaseValue)
}


function IncreaseValue() {
  //some process here to pass value to poolValue_mc.text;
  TweenMax.to(poolValue_mc, 3,{
    y:1000,
    ease:Elastic.easeInOut.config(0, 10),
    onComplete:waitCall
  });
}

 

Note that your tween is not set to reset itself so, you won't see anything move after the first time it plays. Even if you were to reset it, you will end up with a flickering animation jumping around. What you really want to do is to create a carousel of numbers and rotate them at your specific rate, rather than just this one value.

[OSUblake]

Using delayedCall like that can result in time drifting. This might be a better approach to call a function at a set interval.

TweenMax.to({}, 1, {
  onRepeat: myCallback,
  repeat: -1
});

 

For rolling numbers, you can use the ModifiersPlugin. Related demo...

 

See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen