TweenMax with JS not working on Firefox

[future nomads]

can someone tell me why this code is not working on Firefox, it works fine in Chrome.

 

Greet.onmouseover = function(){
  TweenMax.to('#CN', 6, {rotation:"+=180", transformOrigin:"50%, 50%", ease:Power3.easeOut});
  TweenMax.to('#Eng', 8, {rotation:"+=180", transformOrigin:"50%, 50%", ease:Power3.easeOut}, "+=0.5");

};

 

 

thanks

 

 

FN

See the Pen PQvEWd by fantasmoe (@fantasmoe) on CodePen

Edited March 5, 2018 by future nomads
added codepen sample

[Sahil]

I don't see any reason why it wouldn't work in Firefox. Please post a reduced test case demo on codepen.

 

 

[future nomads]

Thanks for the reply, i have posted a codepen sample, same thing happened it works for Chrome but not FireFox

[Carl]

Thanks for posting the demo.

I'm seeing it working in FireFox 58 (Mac)

What version are you using?

[Carl]

Actually, by working, I mean i see animation.

Can you describe the desired effect that you aren't seeing.

Also, if you can reduce the demo to just the parts that aren't working that could help. There's a ton of code in that svg.

 

 

[Sahil]

@Carl Not working on windows, version 58.0.2. The element weirdly rotates around and changes it's width and height. Not sure what must be causing it.

 

 

[Carl]

Thanks, Sahil.

 

It looks like the issue is related to the fact that he is using CSS to set transform values on those elements.

Note in the CSS panel that I removed the transforms for #CN and #pattern.

 

It causes odd placement of those elements of course but if you roll over the grey circle (which previously had opacity:0) you will see animation

 

See the Pen JpqeBd?editors=0110 by anon (@anon) on CodePen

 

 

 

 

 

[Carl]

here is the complete demo without the transforms in the css. it looks like the animation is working.

 

See the Pen XZwyOr by anon (@anon) on CodePen

 

[future nomads]

looks like my CSS is causing the problem,  i removed them and use js to set the position instead and it is working now.

Thank you so much really appreciate you guys looking into this, its been very helpful. Thanks again Carl, thanks Sahil.

[GreenSock]

Just to clarify what was happening...

 

SVG elements can have transforms applied in 2 completely different ways - via CSS or via the "transform" attribute. In old versions of GSAP (before 1.19.x I believe), GSAP would default to using CSS (inline) for most browsers, but since Firefox had some bugs/quirks with that, we applied them via the transform attribute in that case. However, we later discovered more and more browser differences/quirks with CSS, so we defaulted everything to the "transform" attribute instead (it delivered more predictable results, and it was always baked into the SVG spec, so it seemed safest). 

 

You were actually loading 2 completely different versions of TweenMax (1.20.3, then 1.18.0). The old version was loaded last, so it trumped the other. So in Chrome, it was applying transforms via CSS, thus it overruled your class css that you had set up. However, in Firefox, it was being applied via the transform attribute, but you ALSO had that CSS rule applied, thus the browser had TWO completely different values to apply, and it had to decide which to prioritize. Oddly, some browsers prioritize CSS over the transform attribute, others flip that. Annoying, I know. 

 

So that's why it started working when you removed the CSS rules - there was no longer a conflict. 

 

This is one of the reasons we recommend that folks always apply transform-related values directly via GSAP instead of mixing CSS, GSAP, and the "transform" attribute. If you let GSAP do the heavy lifting for you, it'll deliver better browser compatibility, plus it'll be a bit faster as well. 

 

Happy tweening!