elegantseagulls

onUpdate vs Ticker

Recommended Posts

Hey GSAPers,

 

Was thinking about this last night, and didn't see it in the Docs, what's the difference between onUpdate and TweenLite.ticker.addEventListener(); speed of fires, etc? If both are equally available which is more performant?

 

Thanks,

Ryan

Share this post


Link to post
Share on other sites

I don't think there is any performance difference just both are applicable in different scenarios. You must be familiar with requestAnimationFrame, that gets called when browser is ready to render. So internally GSAP relies on rAF in browsers that support it otherwise falls back to setTimeout.

 

Ticker's tick event occurs each time GSAP's engine updates and onUpdate gets called when particular tween/timeline updates. In your case we suggested you to use ticker(or you can use requestAnimationFrame) so you can avoid 100 clearRect calls and call it just once on entire canvas. Same goes for draw calls. Plus ticker made more sense because your canvas was updating on every frame. Instead if you had 4-5 tweens that won't repeat then using ticker won't be good idea because once animations complete you are executing those statements unnecessarily .

 

In most cases when you are dealing with canvas, you will want to use ticker. With DOM you might want to use ticker in situations where you are adding some easing effect like mouse follow effect etc.

 

Plus using ticker has some benefits over rAF, like you can easily add or remove event handler, pass paremeters or set scope. A lot more flexible.

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Yep, @Sahil is exactly right. An onUpdate is tied to a particular animation (which can be a good thing if you want it to only run during that animation), but if you've got a bunch of animations and they've all got onUpdate callbacks triggering the same function, it's just cleaner to use a "tick" event listener. Also keep in mind that the "tick" event listener allows you to ensure that the function runs after ALL of the animations have updated on a particular requestAnimationFrame cycle. Think of it almost like a global onUpdate. Or you can actually increase the priority so that it runs before the whole engine updates instead, but the default is to run after all animations render. 

 

Does that help?

  • Like 4

Share this post


Link to post
Share on other sites

@Sahil @GreenSock

 

Super helpful! Thanks again!

Sahil, your CodePens are amazing, inspiring, and very easy to follow, just wanted to give you an extra thanks!

 

I ended up using ticker for the animation I'm working on I posted it on the other thread, but will here as well in case someone stumbles on this.

 

 

  • Like 5

Share this post


Link to post
Share on other sites

Nice demo @Sahil. :)

 

I can't believe you used the word canvas three times in your post and Blake didn't suddenly appear from a cloud of particles. 🤣

  • Like 2
  • Haha 4

Share this post


Link to post
Share on other sites
5 minutes ago, elegantseagulls said:

Sahil, your CodePens are amazing, inspiring, and very easy to follow, just wanted to give you an extra thanks! 

 

Glad you found it inspiring, most credit goes to @OSUblake and the book I mentioned. I started participating in forum with the intentions of learning from him, it has been great experience so far. I see that you are being active recently as well, great job! Hope to see you continue do so.

  • Like 5

Share this post


Link to post
Share on other sites
7 minutes ago, PointC said:

I can't believe you used the word canvas three times in your post and Blake didn't suddenly appear from a cloud of particles

 

main-qimg-1121a6b513459cd89a5897fccbadaf

  • Like 1
  • Haha 5

Share this post


Link to post
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.