PaulB

Need scaleZ : / TweenMax was cool..

Im curios in this case browser performs css transitions, or gsap is counting animation steps(frames) amount needed to perform and feeds in calculated transform values each period of time based on timing/easing?

Hey, no, both tested on 100Hz and TweenLite is smooth whereas gsap v3 is lagging... You can try and test it out on some higher refresh rate monitor?

Hi, I have some updates. Switching from matrices and processor type most probably not the case here as appeared. The key is that I have gaming monitor which is set to 100Hz. When I switch back to 60Hz issue is gone. That being said, when I do requestAnimationFrame, I get 100 fps to feed in versus 60fps on 60Hz monitors. In other words I need more animation frames to go from point A to point B in one second. And probably gsap v3 ticker is locked to 60 fps maybe? Because when I set CSS transition property on animated div as transition: transform 0.1s linear, I get these gaps between frames filled with browser additional frames and animation becomes smooth on 100Hz!

I'll try to check this and that.

Just realized probably it could be some hardware issue, I have xeon on regular motherboard, maybe some memory issue or smth else but it is not the case if everywhere else it is working, thanks guys.

There is no secret, just very noticeable animation frame rate drop on windows 10 in all browsers, tried "force3D" - doesn't work. Try to swipe or click buttons. It is very strange because on laptop and android phone there is no issues... Maybe some specific hardware/PC issue... gsap v3 (laggy): <p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="Breiva" data-slug-hash="QWwJBqq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="gsap v3 Test"> <span>See the Pen <a href="https://codepen.io/Breiva/pen/QWwJBqq"> gsap v3 Test</a> by Pavel (<a href="https://codepen.io/Breiva">@Breiva</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script> TweenLite (smooth): <p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="Breiva" data-slug-hash="Powxxab" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="TweenLite Test"> <span>See the Pen <a href="https://codepen.io/Breiva/pen/Powxxab"> TweenLite Test</a> by Pavel (<a href="https://codepen.io/Breiva">@Breiva</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script> Thanks.

@Shrug ¯\_(ツ)_/¯ @GreenSock @Jonathan Hi, have some cors issues on codepen at the moment, sorry... Ive created non editable previews here, two examples, just rotation transform animation used. Testing platform is windows 10 and latest versions of chrome, firefox and edge. On android both previews works fine however... TweenLite preview (smooth one): /// Link removed gsap v3 preview (laggy one): /// Link removed Hope this helps.

I've ended up using TweenMax for now... All the animations with scale or rotate transform applied to divs with background-image are noticeably laggy with the release of new gsap 3, it was not the case with TweenMax or TweenLite however. This happening on chrome, firefox and edge.