back

Ticker

The ticker centralizes luge’s requestAnimationFrame callbacks.

You can attach your own functions, they will be called at each requestAnimationFrame call.

Usage

const myCallback = () => { ... }
luge.ticker.add(myCallback, this)
luge.ticker.remove(myCallback)

If you are already using a requestAnimationFrame loop in your code or if you are using a third-party library that uses it (gsap for instance) you can call the tick method manually like so:

// Tell luge to use an external ticker
luge.settings({ticker: {external: true}})

function myRaf () {
  // Call tick method in your raf function
  luge.ticker.tick()

  requestAnimationFrame(myRaf)
}
myRaf()

Or for gsap:

luge.settings({ticker: {external: true}})
gsap.ticker.add(luge.ticker.tick)

Methods

add(callback, context)

Add a function to the requestAnimationFrame loop.

Parameter Type Description
callback Function Function to call.
context Object Context.

remove(callback)

Remove a function from the requestAnimationFrame loop.

Parameter Type Description
callback Function Function that was attached.

nextTick(callback)

Call a function once at next animation frame.

Parameter Type Description
callback Function Function to call only once.
context Object Context.