SVG scale transformOrigin bug in Firefox

[Art2B 0 Likes (Newbie)]

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 ?

[Carl 9,066 Likes (Superhero)]

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/

[Jonathan 5,176 Likes (Superhero)]

I just tested your link Carl in Firefox 29.01 on PC, and transformOrigin is working

[Carl 9,066 Likes (Superhero)]

Thanks, Jonathan. Very helpful.

[Art2B 0 Likes (Newbie)]

Here is a Codepen of my problem (my bad, I should post it directly, sorry)

See the Pen rqhHL by ABattut (@ABattut) on CodePen

 

I'm working with SVG yes. And in firefox, the transformOrigin don't work well.

[jamiejefferson 1,185 Likes (Superhero)]

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

[Jonathan 5,176 Likes (Superhero)]

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.

[Jonathan 5,176 Likes (Superhero)]

Here is an example of Jamie's solution from above..  that animates the radius property of the SVG <circle> tag

 

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

 

[Art2B 0 Likes (Newbie)]

Thanks for your answers. It fix a problem, but not a second :/

 

What about scaling path ?

[value32 0 Likes (Newbie)]

could somebody explain to me why this is working (in firefox)? these are svg polygons, so firefox-transform-origin: center seems to work in certain cases?

See the Pen RNLgJP by grayghostvisuals (@grayghostvisuals) on CodePen

weeird

[Carl 9,066 Likes (Superhero)]

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

[Robert Longson 14 Likes (Newbie)]

Hi Carl,

 

We've (the Firefox developers) made huge advancements in dealing with SVG origins too . Firefox 41 and 42 will support transform-origin with percentages if the svg.transform-origin.enabled is set to true. Firefox 43 will support transform-origin with percentages without requiring any pref at all.

[join_shailesh 1 Likes (Newbie)]

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

[join_shailesh 1 Likes (Newbie)]

No one who know about this.

[OSUblake 9,990 Likes (Superhero)]

I'm seeing a lot more problems than pixel snapping in Firefox (Windows 10). Don't really know what would cause that off the top of my head other than your calculations being incorrect.

 

[join_shailesh 1 Likes (Newbie)]

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

[wijnaldumwilliam 0 Likes (Newbie)]

 

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

 

[join_shailesh 1 Likes (Newbie)]

Hello 

• wijnaldumwilliam
•  

 

thank for reply 

 

sorry but this is not that i want

[Carl 9,066 Likes (Superhero)]

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

[Dipscom 2,815 Likes (Superhero)]

join_shailesh, your question (in the thread you have created) has been answered. Let's avoid confusion by keeping the discussions focused in their respective topics.