Jump to content


SVG rotation and tranformOrigin

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

I'm trying to get a square to rotate around an origin whilst getting larger, however I think the origin needs to move, or do I need to use a static rect to do the rotation, with an inner rect that I grow in size (scale is no good as the line get larger which I don't want).


TIA - Mat



See the Pen by gilale (@gilale) on CodePen

Link to comment
Share on other sites

Hi Mat-Moo :),


Would this work for you?


See the Pen KdrKGz by PointC (@PointC) on CodePen



Edit: Whoops - just re-read your post and you don't want to use scale. So you want the square to get wider and taller, but the stroke to stay at 50px?

Link to comment
Share on other sites

Hi Mat-Moo  :)


pls try like these ways :

TweenMax.to(el2, 10, {attr:{width:800,height:800,x:100,y:100},rotation:360,transformOrigin:"center"});

// or 


and about scaling issue , maybe this can help you  : vector-effect="non-scaling-stroke"



  • Like 5
Link to comment
Share on other sites

@Diaco - I didn't know that non-scaling-stroke existed. Very cool! I do love learning on this forum! :)


@Mat-Moo I added Diaco's suggestion of a non-scaling-stroke to my pen in Post #2 so I think it should be what you're looking to accomplish. I hope it helps.

Link to comment
Share on other sites

It's the transformOrigin Center that solved it, brill... almost :)


So I have http://jsbin.com/gilale/edit?html,js,output pretty much what I was after, but what about a different shape, lets say a star where I want to do the same thing. The square is easy as I can animate the left/right/width/height but a start which would be a polygon, can't really animate all the points? non-scaling stroke kind of works but then you can see the gap doesn't remain consistent as the line width is always the same yet everything else is scaled

Link to comment
Share on other sites

hmm if i understood correctly , you have 2 ways to go :


1 - AttrPlugin ( Tween complex string-based values )  :  http://greensock.com/gsap-1-18-0

with 1.18.0 you can tween complex string-based values , but there's a point , you should to apply path/polygon with same point type / points count  , otherwise you will have a jump in your tween .

simple demo : 

See the Pen MaabXe by GreenSock (@GreenSock) on CodePen



2- MorphSVGPlugin http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/

  • Like 2
Link to comment
Share on other sites

Thanks for the replies, drawing the polygon/star isn't an issue, it's the sizing of it I wasn't sure about. 


For example thanks to the help here I now have http://jsbin.com/gilale/edit?html,output perfect, endless growing square, what I want to do is the same thing with a polygon/star. So as I was trying to badly explain, the square is easy just animate the width/height and x/y coords.... but I'm not sure how to animate the points, would that be using the AttrPlugin and setting a start polygon and end polygon then? (Now I write that down I think that's correct based on Diaco response)

Link to comment
Share on other sites

That's what I would do. You might be able to draw your shapes in such way so that you wouldn't have to change the x, y, or rotation.

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.