Home/ Questions/Q 8421273
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T03:06:24+00:00

I have been experimenting with Greensock’s TweenMax JS and Three.js . As both libraries

  • 0

I have been experimenting with Greensock’s TweenMax JS and Three.js. As both libraries use requestAnimationFrame (rAF), I needed to decide which library should handle this.

If I use rAF built into Three.js, it runs around 30fps and is pretty smooth.

If I use TweenMax eg: TweenMax.ticker.addEventListener('tick', animate); it runs about 55-60fps but is a little choppy.

I can change the fps in TweenMax with TweenMax.ticker.fps(30); which as expected runs similar to the Three.js rAF version.

My question is which method is preferred and is one considered best practice over the other? Also if I choose Three.js am I able to change the fps in its rAF implementation?

Finally, how would you decide on the fps to suit a wider audience? Limiting to 30fps seems ok but is a bit arbitrary, some users may be capable of much higher rates than I am allowing.

UPDATE :

From the feedback from mrdoob and jack, I have tried both rAF in three.js and rAF using TweenMax, with antialias on and off.

antialias on:

Three.js rAF (default) - 30fps smooth.

http://jsfiddle.net/cR7Lx/21/

TweenMax rAF (default) - 55-60fps slightly choppy.

http://jsfiddle.net/cR7Lx/23/

TweenMax rAF (fps(30)) - 30fps smooth.

http://jsfiddle.net/cR7Lx/24/

antialias off:

Three.js rAF (default) - 30 - 60fps slightly choppy.
TweenMax rAF (default) - 92-120fps slightly choppy.
TweenMax rAF (fps(30)) - 30fps smooth.

Could do with someone who knows how requestAnimationFrame works under the hood to help explain the differences, for now I will use either TweenMax 30fps or Three.js both with antialias on.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just to clarify, the default TweenMax RAF behavior doesn’t put a cap on the fps because…well…that’s the point of requestAnimationFrame in the first place – it is intended to be something that the browser dictates (and it’s typically around 60fps). Setting a specific fps with TweenMax.ticker.fps() simply puts a cap on it (unless you set TweenMax.ticker.useRAF(false) in which case it will use a setTimout() to get as close as possible to the fps you set).

    I noticed someone said that you must set an fps in TweenMax in order to make it smooth and I just wanted to clarify that it isn’t true – doing so just skips RAF updates if/when they occur too quickly – I can’t imagine how that’d make anything smoother. It would likely do the opposite.

    Only use TweenMax.ticker.fps() if you want to LOWER the frame rate below the normal browser refresh rate which, again, is typically around 60fps. If you’re looking for the smoothest results, I’d probably stick with the default configuration of TweenMax. You could try turning off requestAnimationFrame and using a very high fps (TweenMax.ticker.useRAF(false); TweenMax.ticker.fps(100)), but the down side there is that you lose all the benefits of RAF, like improved battery life on mobile devices when the tab is inactive, synchronized updates with the native browser refreshes, etc.

    The biggest cause of jerky behavior is graphics rendering in the browser which is unrelated to the JavaScript animation engine.

    I’m not familiar with Three.js, so I can’t speak to its capabilities or which option would be better to use to drive your other stuff (sorry). All I can say is I’m a big GreenSock fan (ha ha)

    • 0