Jump to content


stuttering caused by large JS object

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm using GSAP along Pixi.js and getting some random stuttering.

At first I thought it was a rendering performance problem, but after enabling Chrome FPS I saw it stayed at constant 60 fps.

So I changed from GSAP to Tween.JS and the stuttering completely vanished. I was puzzled, I have been using GSAP for years (since the Flash days) and never encountered such thing.

This got me thinking. Tween.JS tweens an internal JS object, and then you update your own object inside an onUpdate method. So I applied this same idea with GSAP and the stuttering vanished.

var positionTweenProxy = {
x: Grid.layerThumbs.x,
y: Grid.layerThumbs.y

onUpdate: function () {
Grid.layerThumbs.x = positionTweenProxy.x;
Grid.layerThumbs.y = positionTweenProxy.y;

Is it possible that the stuttering is caused by tweenning the properties of a large JS object?

Link to comment
Share on other sites

Something else sounds odd here because the very thing you're doing in the onUpdate is exactly what the tweening engine would do internally anyway (but slightly faster). I'd love to see a reduced test case that we can poke around to see what's different. Can you provide that? A simple codepen would be ideal. 

Link to comment
Share on other sites

I would, but the project is a bit complicated at this point.

Do you have any idea of what could be causing the stuttering?

Link to comment
Share on other sites

I cannot imagine what could be causing the problems...unless maybe you're creating some sort of overwriting scenario, but it's extremely difficult to troubleshoot blind. I can assure you that GSAP should be able to do anything TweenJS can do plus a whole lot more, and GSAP is known to be faster too, so I'm very VERY curious to see this stuttering scenario. 


You don't have to post your production files or anything. If you could take a few minutes to create a reduced test case in codepen or jsfiddle, it'd be super helpful. 

Link to comment
Share on other sites

Impossible to say without knowing everything that's being done.


But if it helps,  we've had loads of problems with AdSense (and other ad network) ads loading on the page and causing extreme stutter / hiccups in Greensock animation just before the ads appear.


There doesn't seem to be much way around it other than to delay the load of the ads using timeouts.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.