Search code examples
javascriptthree.jscreatejstween

Increase frame rate of CreateJS's TweenJS for use w/ three.js

I'm using CreateJS's TweenJS in a 60fps three.js project. I'm noticing the animation feels jerky when I use TweenJS to move objects, as if the objects are being updated at a lower frame rate.

Here is an example: https://jsfiddle.net/sccottt/sbm9s6k5/1/

In the example, the box (animated w/ TweenJS) seems to move much less smoothly than the lines in the background (rotating per requestAnimationFrame()).

Is there a way to change the frame rate of TweenJS, or does anyone have any idea on how to make this perform more smoothly?

Solution

  • The latest version of CreateJS that JSFiddle will host is fairly old (end of 2013). Since then, there is RequestAnimationFrame support (now used as the default timing mode).

    I updated your fiddle, to use the latest (0.6.1, tagged on May 21) with RAF, and it seems much smoother. https://jsfiddle.net/sbm9s6k5/4/

    createjs.Ticker.timingMode = createjs.Ticker.RAF;