Jump to content


Choppy animations on first run only

Moderator Tag

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

In this demo I'm noticing a significant performance hit / choppiness when the animation first runs (click one one boxes). After that, every subsequent animation runs much smoother. I've noticed similar behavior in other projects when I'm manipulating the dom using tween max.


Any ideas what can cause this / how to make it go away?


Running this on a new macbook.



See the Pen OxKMbj by zadvorsky (@zadvorsky) on CodePen

Link to comment
Share on other sites

Hm, I can't see the lag at all. Do you have a demo that uses something other than TweenMax that performs much better so that we could compare and see what's going on? Is there a particular reason you suspect GSAP is the problem? 


Here are some other things to try:

  1. Don't use will-change (see https://greensock.com/will-change)
  2. Set CSSPlugin.defaultForce3D = false. Or if that doesn't help, try true. 
  3. If you're creating timelines, jump to the end and back again to force all the animations to initialize (record their starting/ending values). Like tl.progress(1).progress(0). 

I can't really think of anything in GSAP that'd make the first time much slower. As you probably know, it's highly optimized for speed. The very first render of any tween is technically more expensive, though, because it has to read/record the values internally to interpolate between. 

  • Like 2
Link to comment
Share on other sites

Hi @zadvorski


I'm not seeing any lag either. What browser are you using? And do you see the lag on other sites besides Codepen?


See how it behaves inside an incognito/private window with your dev tools closed. You might have some kind of browser extension that is interfering with it. And Codepen demos will run a lot faster when viewed in full page or debug mode.




BTW, I really like your demo. I noticed you were doing inverse scaling, and I've been experimenting with an ease that will let you animate inverse scale without having to recalculate it on every update.



And with FLIP animations, I know it's pretty much gospel that you're supposed to use getBoundingClientRect, but that's not correct. It will fail if your element has transforms on it. It's going to report the incorrect bounds. That's why you can't interrupt your animation. The fix is to calculate the bounding box of the element using element.offset{Top,Left,Width,Height}.


I reworked your demo, and slowed it down so you can see the difference it makes.


See the Pen mqQdWV?editors=0010 by osublake (@osublake) on CodePen






  • Like 5
Link to comment
Share on other sites

I was using chrome to test it. It does seem to be running fine in other browsers, so yeah, its probably an extension issue of some kind, which is good news. Thanks for looking into it. I'll post back if/when I find the culprit, need to clean up some extensions anyway.


Also thanks for your input Osu, I'll look those changes.

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