Some questions about gsap.ticker

[ywlee]

Hello Everyone!

I have some question about gsap.ticker because I'm not very familiar with it.

I found it in the codepen above

1. Why the author didn't use normal gsap.to or gsap.set? Is it better to deal with gsap.ticker?  Is there another way to achieve the same effect without ticker?  
2. If my understanding is correct, is gsap.ticker like some sort of requestAnimationFrame? Is there any different between adding (callback)function in each of them?
3. If I have, for example, 3 different animations on the same page, all of them are base on mouse move, Can I create 3 gsap.tickers?

 

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

[mikel]

Hey @ywlee,

 

You can find a lot of information in the DOCs.

 

The gsap.ticker is like the heartbeat of the GSAP engine - it updates the globalTimeline on every requestAnimationFrame event, so it is perfectly synchronized with the browser’s rendering cycle. You can add your own listener(s) to run custom logic after each update (great for game developers). Add as many listeners as you want.

 

Happy tweening ...

Mikel

 

[ZachSaucier]

Hey ywlee. To add some additional info, GSAP's ticker is a way that you can do something every time GSAP updates.

 

2 hours ago, ywlee said:

Why the author didn't use normal gsap.to or gsap.set? ... Is there another way to achieve the same effect without ticker?

Yes, you could create the demo using tweens (making sure to overwrite old tweens each time the mouse moves) but it'd be slightly less performant. Since the mousemove event fires a lot when a user is moving their mouse around, it'd helpful to make things as performant as possible. 

 

2 hours ago, ywlee said:

Is it better to deal with gsap.ticker?

In this case it probably makes more sense to use GSAP's ticker and quickSetter because it's more throttled and a little more performant. In general using GSAP's ticker is not "better" than using regular tweens. Regular tweens use GSAP's ticker under the hood. Whether or not you should use regular tweens or GSAP's ticker directly depends on what you're creating. In most cases regular tweens are best  

 

2 hours ago, ywlee said:

gsap.ticker like some sort of requestAnimationFrame?

More or less. 

 

2 hours ago, ywlee said:

Is there any different between adding (callback)function in each of them?

Sorry, I don't understand your question. Can you try to rephrase what you're asking?

 

2 hours ago, ywlee said:

If I have, for example, 3 different animations on the same page, all of them are base on mouse move, Can I create 3 gsap.tickers?

There's only one ticker. But you can add 3 different functions to GSAP's ticker, sure, no problem. But it might make more sense to use a single function and attach that to GSAP's ticker.

[ywlee]

 

 

@mikel

Thank you so much for the quick reply! The docs answers almost every question of mine

 

@ZachSaucier

Thank you Zach!!! Sorry I didn't make my question clear.

 

 

5 hours ago, ZachSaucier said:

7 hours ago, ywlee said:

Is there any different between adding (callback)function in each of them?

Sorry, I don't understand your question. Can you try to rephrase what you're asking?

gsap.ticker.add(foo); 
function foo(){
  // code
}

// or 

function foo(){
  // code
  requestAnimationFrame(foo);
}

foo();

  

[GreenSock]

Performance-wise, there's almost no difference but with gsap.ticker you get access to some extra information that's passed to your function like the time since the last tick, the frame, etc. 

[ywlee]

@GreenSock @mikel @ZachSaucier

Your answers just make my day!

Now I know more about this fantastic animation tool!

Can't thank you enough