overdub60

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';`

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.

thank you @Jonathan!

@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?

@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?

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:

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

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: 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: 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!