Jump to content
Search Community

TweenMax with JS not working on Firefox

future nomads test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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");








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

Edited by future nomads
added codepen sample
Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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






  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...