onUpdate vs Ticker

[elegantseagulls 209 Likes (Specialist)]

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

[Sahil 2,541 Likes (Superhero)]

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.

 

See the Pen MQbdNR by Sahil89 (@Sahil89) on CodePen

 

[GreenSock 8,117 Likes (Superhero)]

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?

[elegantseagulls 209 Likes (Specialist)]

@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.

 

See the Pen RqjwZL by elegantseagulls (@elegantseagulls) on CodePen

 

[PointC 8,599 Likes (Superhero)]

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. ?

[Sahil 2,541 Likes (Superhero)]

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.

[Rodrigo 2,662 Likes (Superhero)]

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