ywlee Posted January 6, 2021 Share Posted January 6, 2021 Hello Everyone! I have some question about gsap.ticker because I'm not very familiar with it. I found it in the codepen above 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? 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? 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 More sharing options...
mikel Posted January 6, 2021 Share Posted January 6, 2021 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 4 Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted January 6, 2021 Solution Share Posted January 6, 2021 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. 1 Link to comment Share on other sites More sharing options...
ywlee Posted January 7, 2021 Author Share Posted January 7, 2021 @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 More sharing options...
GreenSock Posted January 7, 2021 Share Posted January 7, 2021 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. 2 Link to comment Share on other sites More sharing options...
ywlee Posted January 7, 2021 Author Share Posted January 7, 2021 @GreenSock @mikel @ZachSaucier Your answers just make my day! Now I know more about this fantastic animation tool! Can't thank you enough Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now