Weird CSS rotation after timeline transforms

[code-im-perfect]

I have attached a simple recreation of the bug that I'm facing, there is a much more complicated timeline so cannot shift to CSS only animation.

 

As you can see in the demo, rotation works perfectly fine with gsap, but css transforms it, without considering the transform, is there any way I can "apply" the gsap transforms as CSS at the end of the timeline and just remove all the previous gsap effects?

 

Anyways, would separate infinite gsap timeline be less efficient than an infinite CSS animation? cuz that would be a lot simpler to apply.

See the Pen YPKVQOP by codeIMperfect (@codeIMperfect) on CodePen.

[code-im-perfect]

Solved it by adding `repeat:infinite` on the last fromTo, instead of using CSS Animation

[Rodrigo]

hi @code-im-perfect and welcome to the GSAP Forums!

 

Indeed as you already found out, using repeat: -1 on that particular tween at the end of the timeline is the best approach in this case.

10 hours ago, code-im-perfect said:

Anyways, would separate infinite gsap timeline be less efficient than an infinite CSS animation? cuz that would be a lot simpler to apply.

I can't think of a single reason for a GSAP instance being less efficient than an endless CSS transition, GSAP just applies styles to the element being animated over an amount of time (duration of the tween), that's all. The good thing is that GSAP is highly optimized and efficient at it's job so a performance problem is very unlikely. You could easily add a class once the GSAP Timeline is completed in order to start an endless CSS Transition, but beware that GSAP handles transforms a bit differently than CSS normally does so you could experience some unexpected results, so is better to handle all transforms the way you're already doing. Finally is never a good idea to mix CSS Transitions and GSAP animations on the same property at the same time as explained here:

https://gsap.com/resources/mistakes#using-css-transitions-and-gsap-on-the-same-properties

 

Hopefully this clear things up

Happy Tweening!