Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ywlee

Some questions about gsap.ticker

Go to solution Solved by ZachSaucier,

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 4
Link to comment
Share on other sites

  • Solution

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.

  • Like 1
Link to comment
Share on other sites

 

 

@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();

  
Link to comment
Share on other sites

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. 

  • Like 2
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.
×