[Some issues with GSAP 3 and 3D transforms on the Z axis]

Need scaleZ : / TweenMax was cool..

[Laggy animations]

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?

[Laggy animations]

4 hours ago, GreenSock said:

GSAP is based on requestAnimationFrame which is completely controlled by the browser. It strikes me as a bit odd that CSS transitions would run at a totally different refresh rate than everything else; you'd think that the browser should repaint at a consistent rate regardless (unless the JS thread is super busy when the separate transforms/opacity CSS thread is ready to update in which case it'd just skip the JS-based updates) but I'm not a browser engineer so I couldn't tell you how or why they do stuff under the hood. 

 

What's the most baffling to me, though, is that you said the GSAP v2 was smooth whereas GSAP v3 wasn't, but they're BOTH based on exactly the same mechanism (requestAnimationFrame). Were your eyes just playing tricks on you? Maybe you tested v2 when you were in 60hz mode, and you tested v3 in 100hz?

 

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?

[Laggy animations]

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!

[Laggy animations]

22 minutes ago, ZachSaucier said:

If you can hone in on exactly what is causing the issues and whether or not it's directly related to GSAP we'd really appreciate your effort and input. We understand that if it's not worth figuring out the cause to you because it'd take too much time that's alright.

I'll try to check this and that.

[Laggy animations]

9 minutes ago, ZachSaucier said:

On my Mac there are no issues as well.

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.

[Laggy animations]

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

See the Pen QWwJBqq by Breiva (@Breiva) on CodePen

 

TweenLite (smooth):

See the Pen Powxxab by Breiva (@Breiva) on CodePen

 

Thanks.

[Laggy animations]

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

[Laggy animations]

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.