Jump to content
Search Community

SVG scale transformOrigin bug in Firefox

Art2B 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

Hi everyone !

I got a problem with Firefox. I'm trying to scale dot with transformOrigin set as "center", like in the code below:

TweenMax.to(flux, 0.15, {scale: "1", transformOrigin:"center", delay: delayFlux});

In Chrome, I don't get any problem, the dot scale up properly (first gif). But in Firefox, the dot does something weird like in the second gif.

 

I've tried with transformOrigin: "50%" or "50% 50%" without success.

 

Do you have any idea about that problem ?

post-19943-0-69591100-1401294166_thumb.gif

post-19943-0-59320400-1401294234_thumb.gif

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

The default transformOrigin should be the center, so typically you wouldn't have to set it as "50% 50%".

 

I made a quick demo showing that transformOrigin is working in FireFox 29.0.1 (latest version MAC)

 

http://codepen.io/anon/pen/sgJjd

 

Are you seeing things properly in the link above in FireFox?

If not, what version of FF are you using?

Are you animating an svg element perhaps?

 

It would really help to see a reduced test case of your code as explained here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 1
Link to comment
Share on other sites

Thanks for the CodePen, and for the record: it's not GSAP, it's Firefox.

 

https://bugzilla.mozilla.org/show_bug.cgi?id=923193

 

SVG transform-origin was 'supposed' to be fixed in Firefox 28, but it's still not right yet. I know I still have a lot of trouble with it, and of course your CodePen isn't working correctly.

 

GSAP doesn't implement its own transform-origin, and relies on the browser to get it right. Until they do, you'll be stuck with crap like

if (!firefox) do scale tween with transform origin
unfortunately.

 

Also in your case, with SVG <circle>s you might get a decent result tweening radius instead of scale

TweenMax.to(circle, 1, { attr:{ r:36 } });
  • Like 2
Link to comment
Share on other sites

Ahhh, so your trying transform-origin on SVG in Firefox..

 

Yep Jamie is right.. Firefox supports transform-origin. But since now you are talking about using transform-origin with SVG in Firefox .. now i can see your issue..

 

This is a Firefox browser SVG transform-origin bug, found here:

 

Firefox Bug 923193 - Support transform-origin in SVG

 

You might be able to do a workaround when scaling by also animating the translateX (x) and translateY (y) at half of the svg elements width and height to compensate.

  • Like 1
Link to comment
Share on other sites

  • 8 months later...

Hi Value32,

 

Welcome to the GreenSock forums. We have made huge advancements in terms of dealing with SVG origins and animation since this post from nearly a year ago.

 

Please read this article (and watch the video) which describes how GSAP normalizes behavior between SVG children and DOM elements and fixes many cross-browser bugs: http://css-tricks.com/svg-animation-on-css-transforms/I think you will find it very interesting and helpful.

 

 

The CodePen demo you are referencing employs these updates by loading TweenMax version 1.15.1

  • Like 2
Link to comment
Share on other sites

  • 7 months later...
  • 5 months later...
Guest join_shailesh

Hello friends,


 


i am trying to animate svg path  element just giving X & Y transition bt it work properly in chrome  bt not in mozila so please give suggestion .animation regarding girl charecter which raise their hand . 


at the very end of the animation, when the arm stops there's a slight movement as if it is going from half a pixel to a whole pixel - Could be Firefox's anti alias


 


please check bellow pen link  on chrome as well mozilla 


 


See the Pen WwbNjG?editors=0010 by shailesh_1299 (@shailesh_1299) on CodePen

Link to comment
Share on other sites

Guest join_shailesh

Thank for replay OSUblake,

 

but i don't think about  that calculation incorrect. if i am please correct me.

 

or it  is mozilla bug? means mozilla not compatible to these animation? or anything else ?

 

thnak u..

Link to comment
Share on other sites

 
13down voteaccepted

I was attempting to rotate a simple cog svg graphic around its centre point using a CSS transition. I had the same problem as you with Firefox; transform-origin seemed to have no effect.

The solution was to draw the original svg shape so that its centre was at coordinate 0, 0:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>

Then add a group around it and translate to the position you want:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<g transform="translate(150, 100)">
<rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</g>
</svg>

Now you can apply css transitions that should work in Firefox (I add a class to the HTML tag using JavaScript based on a user action (js-rotateObject) and use Minimizr to check that the browser can handle transforms and transitions (.csstransforms.csstransitions):

#myObject{
transform: rotate(0deg);
transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject{
transform: rotate(360deg);
}

 

Link to comment
Share on other sites

FWiW I'm not seeing any issues on FireFox on Mac.

It would really help if you could provide a reduced demo with only the necessary svg data and js code so the issue can be isolated as much as possible before we dig in.

 

thx

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

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