Jump to content


Setting the frames per second for tweens?

Go to solution Solved by agamemnus,

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

Hi. I just started using GSAP earlier today. Very nice. I'm having a little trouble though and most of the links on google are dead (probably because you updated your site a few days ago).


I have an animation that reduces the size of an element, but it looks jittery because the first few frames seem to happen without much smoothing. When it gets small, it is smooth, but not when it is large. Is there any way I can control the amount of frames per second in my tween?

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Honestly is really hard for us to see what the issues could be with what little information you provided in your first post. Based just on that what could be is that the element you're tweening is too big and the animation time is a bit long, therefore there's some jitter due to browser rendering issues and perhaps increasing the frame rate, which leads to less paints per second, could solve it, again without a live sample is hard to know. Because of this we encourage users to provide a reduced sample in codepen that demonstrates the issue(s):




For your next questions please make the extra effort to provide some live code, it helps reducing respond time and ensures the user that they won't have to wait for too long for a solid answer.



  • Like 2
Link to comment
Share on other sites

  • Solution

I did do some tests... The slowdown only happens in Chrome.


I made a very simple test case of the GSAP animation and it was perfectly smooth,  but on my real case it isn't. The difference is that in the real case there are more layers of parent / ancestor elements for the target element.


The element was relatively positioned. Changing it to an absolutely positioned element made the effect much smoother... I think that in Chrome, there are some superfluous miniscule repositioning calculations being done, and maybe constant reflows. Chrome tends to do more anti-aliasing than Firefox (and thus reflows more, I guess).


I tried disabling requestAnimationFrame as well as replacing the tween with code from two other animation libraries, and the smoothness difference on relative versus absolute positioning were the same.

  • 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.