Jump to content
Search Community

onUpdate vs Ticker

elegantseagulls test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 ?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 5
Link to comment
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 5
Link to comment
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.

 

See the Pen ?editors=1111 by elegantseagulls (@elegantseagulls) on CodePen

 

  • Like 6
Link to comment
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
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.
×
×
  • Create New...