Jump to content


svgOrigin to find the center

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

Maybe I am over-thinking this and there is a much simpler solution.


I am trying to set a bunch of SVG circles to the center point of the parent SVG, and maybe use svgOrigin to find the center (of the main SVG's viewBox) and apply it to X, Y starting values of each of the circles. In my codePen I am using a standard way to find the center and then apply those values to the X, Y points of each of my circles, but it doesn't seem to work. Then I figured I could use the svg's bounding-box, viewBox or some other way to get the center... or possibly svgOrigin, but all of my attempts don't seem to work properly.


Ideally I wanted to use stagger and cycle to animate each dot from the exact center point in the SVG's viewBox--but applying the center of the main SVG's viewBox to their starting positions is what I can't seem to get.

See the Pen XdqXOJ by celli (@celli) on CodePen

Link to comment
Share on other sites

Hi celli :)


Do you need to calculate the center on the fly? Since this is a SVG, we can just look at the viewBox of 0 0 600 361 and know that the center is 300 180.5. You could then use that as a staggerFrom() tween coordinate for your circles cx and cy attributes.

circles.staggerFrom(".circleBlast", 0.8, {attr:{cx:300,cy:180.5}},0.0005)

I'm not sure if that's exactly what you wanted, but here's a fork of your pen with that solution.


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


Hopefully that helps.


  • Like 3
Link to comment
Share on other sites

PointC! You are on point, and a perfect solution as usual ! Thanks :)

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