Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Art2B

SVG scale transformOrigin bug in Firefox

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

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

Link to comment
Share on other sites

Thanks, Jonathan. Very helpful.

Link to comment
Share on other sites

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.

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

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

 

:)

Link to comment
Share on other sites

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

 

What about scaling path ?

Link to comment
Share on other sites

  • 8 months later...

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

Link to comment
Share on other sites

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

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.

Link to comment
Share on other sites

  • 5 months later...

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

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.

 

yaan8Ee.png

Link to comment
Share on other sites

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.

×