Jump to content


SVG Transform Origin Issue

Go to solution Solved by Diaco,

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 having an issue with transformOrigin and svg groups. It's not really a GSAP issue, everything is working as it should be. It's more that I cant work out how to get the correct transform origin psoition.


Essentially i have a bunch of concentric circles, with little dots on them. Each set is in it's own group. I'd like to rotate it so TransformOrigin: '50% 50%' might seem the logical choice. However the issue is that since I'm rotating the group and the group isn't the same size as the 'main circle' (which is also the 'rotate path') the transform is off (great if you liked spirograph as a kid, not so great for me). 


The problem is occurring because some of the edges of the little dots that sit on the larger stroked circles are not flush with the main circle, so the group tag naturally wraps around the outtermost elements. In the one circle group I've animated successfully, I've simply been able to set the radius of the inner circle as the Transform Origin but this only works because the top and left bounding of the group matches that of the main circle, where a dot pushes the group out at the top and left, this doesn't work.


The pen will help you to understand this a little better, especially if you inspect the svg and see how the group box is larger (often on all sides) than the circle that makes up the animation path. 


What I was wondering is if anyone knows of a way to calculate the correct transform origin position, or if there is a simpler solution/ best practice I should be following.


In the pen, the first circle in each SVG group is the 'main circle' (the stroked circle that makes up the animation path), the other circles are the little dots. Yes, I know that is a massive svg with billions of elements, and I apologise for that.



Thanks in advance

See the Pen LGZYxa by peterallenio (@peterallenio) on CodePen

Link to comment
Share on other sites

  • Solution

Hi pnda007  :)


if i understood correclty your problem , pls use svgOrigin instead of transformOrigin , like this :

TweenMax.staggerTo('g',5,{cycle:{rotation:[360,-360]},svgOrigin:"90.1 151.9",ease:Linear.easeNone,repeat:-1});

pls check this out : 

See the Pen vLKgKq by MAW (@MAW) on CodePen


and pls check this blog post about Animating SVG with GSAP : http://greensock.com/svg-tips

  • Like 4
Link to comment
Share on other sites

Amazing. You have changed my life. I didn't know about SVG Origin. I'm assuming that it is relative to the global SVG co-ordinate space as opposed to the element co-ordinate space?


That is perfect, thank you very much! Amazing support as usual!

  • Like 1
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.