Details

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
gsap.ticker.add(myFunction);
function myFunction(event) {
  //executes on every tick after the core engine updates
}
//to remove the listener later...
gsap.ticker.remove(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
gsap.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
gsap.ticker.fps(30);

When using requestAnimationFrame (the default), the fps() setting acts like a throttle. Since you cannot tell the browser to crank out requestAnimationFrames at a higher rate than 60fps, you can’t do something like gsap.ticker.fps(100) (well, you can but it’ll still run at around 60fps). You could, however, do gsap.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 gsap.ticker.useRAF(false) and then set the fps() to whatever you want, like gsap.ticker.fps(100)

Parameters

1. callback : Function - The function to call when the event occurs. The following variables are passed to each listener: time, deltaTime, and frame (in that order).

Advanced listeners

Your listener function could be setup to make use of those the parameters that are passed to it like so:

function myFunction(time, deltaTime, frame) {
  //makes use of time, deltaTime, and frame
}

Other useful methods

ticker.lagSmoothing()

The gsap.ticker.lagSmoothing method acts as a getter and setter for GSAP’s lag smoothing.

What happens when the CPU gets bogged down and there’s a lag between renders? For example, imagine a 2-second tween that should start right away, but the CPU is busy for a full second before it can render that tween for the first time. Most other animation engines (including CSS animations in some browsers) slide the start time forward to compensate but there’s a major drawback to that approach: it sacrifices synchronization and can mangle delays so that when you try to neatly stagger animations, they spew out in clumps/groups. That’s no good.

GSAP has always used a strict timing model that prioritizes perfect synchronization, meaning in the example above, the tween would render as if it’s halfway done after the initial 1-second lag. Basically, every animation engine has to pay the lag tax one way or the other - either maintain strict timing and synchronization, or slide the starting times around and lose sync.

gsap.ticker.lagSmoothing() gives you the best of both worlds because when the CPU gets bogged down, it adjusts the core timing mechanism on the next tick which affects all animations, thus everything remains perfectly synchronized. You can set the threshold (in millisecond) so that whenever there’s a lag greater than that threshold, the engine will adjust the internal clock to act like the adjustedLag elapsed instead. Even though you call the static method on gsap, this one adjustment affects everything in GSAP (tweens, timelines, and delayedCalls because they’re all driven by a single timing mechanism at the heart of gsap).

For example, if the threshold is 500 and the adjustedLag is 33 (those are the defaults), the only time an adjustment will occur is when more than 500ms elapses between two ticks in which case it will act as though only 33ms elapsed. So if the CPU bogs down for 2 full seconds (yikes!), your animations will move 33ms worth of time on the next render instead of jumping a full 2-seconds. Note: this has no affect on the device’s performance or true frame rate - this merely affects how GSAP reacts when the browser drops frames.

This feature is already activated by default, using a threshold of 500ms and a adjustedLag of 33ms, but if you want to change the settings you can do so like this:

//compensate only when 1000ms or more elapses between 2 ticks,
//and then make it act like only 16ms elapsed:
gsap.ticker.lagSmoothing(1000, 16);

Why not set the values super low, like to 10 for both? Because doing so wouldn’t allow much breathing room, and it would naturally make your tweens look like they’re running more slowly (because technically they are if the time is getting nudged forward on almost every render). Also note that if you’ve got any delayedCalls, those will be affected as well. That’s a good thing - it ensures that you can rely on those to be perfectly synchronized with the rest of the engine, but if the browser is under heavy pressure and is only rendering a few frames per second, it’d seem as if time is literally slowing down and a 2-second tween (or delayedCall) might actually take 8 seconds to complete.

In most real-world scenarios, the defaults of 500 and 33 are ideal because they protect against significant hiccups in the browser/CPU while allowing minor variations in the frame rate without slowing things down unnecessarily.

If you’d like to disable lag smoothing, you can simply set it to 0 like gsap.ticker.lagSmoothing(0) which is the same as setting the threshold to a super large value so that it never kicks in.