[yarn add gsap and TweenLite issues]

Thanks @GreenSock, unfortunately this doesn't work either. I'm using TypeScript and I get an error that complains about missing types, even though I already installed types/gsap...

 

TS7016: Could not find a declaration file for module 'gsap/TweenLite'. 'node_modules/gsap/TweenLite.js' implicitly has an 'any' type.
Try 'npm install @types/gsap' if it exists or add a new declaration (.d.ts) file containing `'declare module 'gsap';`

 

[yarn add gsap and TweenLite issues]

I've installed gsap with

yarn add gsap

 

I then import TweenLite like this

import { TweenLite, Power2 } from 'gsap';

 

When I look into my build, I see that the full TweenMax bundle is included in the build. Is there a way around that? I would prefer to just have TweenLite in there.

 

I realize that the preferred method is using the CDN but I would still like to use the npm/yarn version.

[animating css transform stutters on first execution]

thank you @Jonathan!

[animating css transform stutters on first execution]

@Jonathan Thank you!! Once I go out of /pen/ and into /debug/ everything renders smoothly! So it seems it's just a codepen issue! Also, I wasn't aware that maxtrix() performs better than scale(). Does that apply to scale3d() as well? I thought once we enable 3D, we always get hardware acceleration?

[animating css transform stutters on first execution]

@Jonathan I see this most on Chrome 65.0.3325.181, macOS High Sierra, 2015 Mac Book Pro. I see it on Safari 11.0.3 as well though. It's also visible on a co-worker's computer, also the latest Chrome. So it's not just my machine. And from what I gather from the responses here, people have seen the glitch on their machines as well right?

[animating css transform stutters on first execution]

Thanks for all the feedback! Unfortunately, none of the suggestions improve the tween smoothness for me. I removed the will-change properties completely since they neither improve nor degrade performance for me in this case. Also, @Carl, I don't see any difference in your example compared to mine. I also changed the TweenMax version to the most recent one. Again, no change. I also added the slight rotation suggested by @Jonathan, didn't help either. Weird!

 

Here's my latest demo:

 

See the Pen zWwazQ by overdub60 (@overdub60) on CodePen

 

[animating css transform stutters on first execution]

Thank you @Sahil for your help. Unfortunately, the problem remains. Do you see what I mean, even in your demos?

[animating css transform stutters on first execution]

I've created a scale animation with tweenmax which stutters upon executing the first time. Every time after that, it renders fine. This problem is most visible in Chrome on a Mac.

 

See my Codepen here. Please run it directly on code pen instead of this embedded version, otherwise the problem won't be visible:

 

See the Pen vRgYYQ by overdub60 (@overdub60) on CodePen

 

You have to reload the page to see the stuttering. Click on the content and the scale animation runs.

 

When I do the same with regular CSS transitions instead of TweenMax, it looks smoother to me. I've created a codepen for that as well:

See the Pen zWNmyK by overdub60 (@overdub60) on CodePen

 

Does anyone have an idea why that is and can possibly offer a solution?

 

Before anyone says I should just use the CSS transition then, it won't work, because I need to sync up with other TweenMax tweens.

 

Thanks!