TweenLite.ticker

The object that dispatches a "tick" event each time the engine updates, making it easy for you to add your own listener(s) to run custom logic after each update (great for game developers). Add as many listeners as you want.

Basic example:

//add listener
TweenLite.ticker.addEventListener("tick", myFunction);
 
function myFunction(event) {
    //executes on every tick after the core engine updates
}
 
//to remove the listener later...
TweenLite.ticker.removeEventListener("tick", myFunction);

The ticker is driven by requestAnimationFrame events in modern browsers so that the updates are perfectly synchronized with the browser's rendering cycle. It also means that when the user switches to a different tab in the browser, the ticker's updates get throttled back significantly in order to conserve battery power and reduce load on the CPU (this happens because the browser itself throttles back requestAnimationFrame event dispatching). Typically requestAnimationFrame events occur around 60 times per second, but that's up to the browser and depends on system performance as well. If requestAnimationFrame isn't supported, the ticker automatically falls back to using a regular setTimeout() loop which is supported in all browsers.

Customizing the ticker

To force the ticker to use setTimout() instead of requestAnimationFrame, you can use the ticker's useRAF() method:

//turn off requestAnimationFrame, causing ticker to use setTimeout() instead
TweenLite.ticker.useRAF(false);]

And if you'd like to set a particular frame rate, you can use the fps() method like this:

//throttle back the frames-per-second to 30
TweenLite.ticker.fps(30);

When using requestAnimationFrame (the default), the fps() setting acts like a throttle. Since you cannot tell the browser to crank outrequestAnimationFrames at a higher rate than 60fps, you can't do something like TweenLite.ticker.fps(100) (well, you can but it'll still run at around 60fps). You could, however, do TweenLite.ticker.fps(30) and the engine will skip beats when necessary in order to get you as close as possible to 30fps (or whatever fps you set below 60). If you need an fps greater than 60fps (which generally isn't recommended), you should turn off requestAnimationFrame using TweenLite.ticker.useRAF(false) and then set the fps() to whatever you want, likeTweenLite.ticker.fps(100)

Advanced listeners

If you need to define the scope (what "this" refers to inside the function) or define a particular priority so that the handlers are called in a particular order, you can use the advanced syntax with extra parameters as follows:

addEventListener(type, callback, scope, useParam, priority)

Parameters:

1. type : String - type of listener, should always be "tick"
2. callback : Function - the function to call when the event occurs
3. scope : Object - binds the scope to a particular object (scope is basically what "this" refers to in your function). This can be very useful in JavaScript because scope isn't generally maintained.
4. useParam : Boolean - if true, an event object will be generated and fed to the callback each time the event occurs. The event is a generic object and has two properties: type (always "tick") and target which refers to the ticker instance. The default for useParam is falsebecause it improves performance.
5. priority : Integer - influences the order in which the listeners are called. Listeners with lower priorities are called after ones with higher priorities.

Advanced Example

 //add listener that requests an event object parameter, binds scope to the current scope (this), and sets priority to 1 so that it is called before any other listeners that had a priority lower than 1...
 TweenLite.ticker.addEventListener("tick", myFunction, this, true, 1);
 
 function myFunction(event) {
     //executes on every tick after the core engine updates
 }
 
 //to remove the listener later...
 TweenLite.ticker.removeEventListener("tick", myFunction);