Jump to content

Da Man

Ticker and Performance on Canvas

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'm doing some animation on canvas with tweens currently like this (this is just one of a few):

TweenLite.to(data, tweenDuration, {numMsgs:numMsgsResult, delay:overallDelay, ease:easeFunc, onUpdate:draw});

Needless to say, the draw() function is called onUpdate and it is what draws on my canvas. I was wondering, however, whether moving to a ticker approach would improve performance. If it does, then that'd be great.


However, I tried reading the documentation for it and I'm still a bit confused as to how I'd implement this. How do I go from what my code currently does to a ticker approach?


Thanks in advance.

Link to comment
Share on other sites

Hi and welcome to the forums.


The basic usage of the engine's ticker function is as follow:

TweenLite.ticker.addEventListener("tick", yourFunction);

function yourFunction()
    //your code

That function will trigger every time the engine updates, but is no guarantee of performance improvement, that'll depend on other factors also, for example what's the callback target: images, shapes, both?; how many targets there are: 5, 50, 500?. To understand a little more please check this reply by Jack:



For more details check this posts:





Also you can see this codepen of the greensock collection for more inspiration:

See the Pen Kajpu by GreenSock (@GreenSock) on CodePen


It deals with the bezier plugin but it uses the tick function on a canvas element.


Hope this helps,



Link to comment
Share on other sites

In addition to Rodrigo's great advice.


Here is a very simple implementation of the ticker (not using canvas)



When you are dealing directly with canvas, you have quite a bit to keep on top of. You only want to be redrawing certain elements once per frame and ONLY when they are being animated. Certainly possible to do on your own, but its a bit of work. 


We have a plugin for the canvas library KineticJS. KineticJS has a very robust API and a tremendous amount of tutorials. Very easy to get going with it.


Our plugin taps into KineticJS properties and allows you to animate them effortlessly. The plugin detects the layer of the object that is being animated and automatically calls draw() on that layer when a property is being animated. Furthermore if multiple objects are animating at the same time on the same layer, only 1 draw() call on that layer per tick is fired. It is extremely efficient.



Here is a little KineticJS demo using the KineticPlugin (from GreenSock) which shows a bezier tween with autoRotate activated and more simple animation.



Notice no code involving the ticker or updates or draws, it all happens seamlessly through the plugin.


We are still fine tuning the documentation for KineticPlugin, but I think the demo will give you a basic idea of how it works. 

Link to comment
Share on other sites

Thanks for all the info! I'll definitely spend some time to take a look at this.

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.