Long tweens appear "jerky", short tweens look OK?!

[Mr Pablo 6 Likes (Newbie)]

If I tween an image for ~1 second, it looks pretty smooth, but as soon as I tween an image to ~10 seconds, the motion appears jerky and stutters noticeably,

 

Now, the image in question is quite large, but potentially usable in my project, so ideally I need the tweens ot run smooth for this image.

 

Is there anything I can do to smooth out the longer, stuttering tweens?

[Carl 11,094 Likes (Superhero)]

If you are doing positional tweens (left, top) keep in mind those values are forced to whole pixel values.

 

You could try using transform values instead (x, y)

TweenLite.to(img, 10, {x:200});

[Mr Pablo 6 Likes (Newbie)]

Yea, I am using x and y co-ords.

 

Its not a massive issue, as most tweens will be fairly quick

[GreenSock 18,231 Likes (Superhero)]

Yeah, some browsers still force the rounding apparently even though GSAP is setting decimals. You could try forcing the object into 3D space so that the browser uses the GPU more directly. Seems to work better in Chrome at least (haven't looked elsewhere). In the most recent version of GSAP, you can set force3D:true or just set a z of 0.01 or something. 

TweenLite.to("#yourID", 10, {x:10, force3D:true});

That appears to force sub-pixel rendering. 

[Mr Pablo 6 Likes (Newbie)]

The update alone seemed to help I think! it's looking much smoother now with an increased duration