Jump to content


animating out from a center point

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 have a diagram of three small circles that all sit on the outline of much larger cirlce, much like an atomic diagram. I need to animate (fade in and movepost-31556-0-91765100-1462802318_thumb.png) these smaller circles out from the center point of this larger circle.


I haven't yet found a way to achieve this....anyone out there that can help?


Thanks in anticipation

Link to comment
Share on other sites

Hi icraig6666 :)


I'm assuming this is an SVG? If so, you need to take a look at svgOrigin. That allows you to use any point in the global coordinate space of the SVG as the origin for those circles. Please take a look at this blog post for the best information. 




Hopefully that helps a bit.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

Hello icraig6666, and Welcome to the GreenSock forum!


if you still need help ...


Please create a codepen demo example so we can see your code in context and in a live editable environment!



Thanks :)

  • Like 2
Link to comment
Share on other sites

I agree with Jonathan a demo is really important as we really need to know how you are building your circle so that we can suggest what properties to animate and how. If you use SVG it will be different than using regular DOM elements. 


So without knowing more details of what you are doing I decided it would be fun (and perhaps helpful) to show you a way that doesn't require any scary math.


var numCircles = document.querySelectorAll(".circle").length;

TweenLite.set(".circleHolder", {transformOrigin:"left"})

//rotate each .circleHolder a little bit
//following code works similar to a loop
TweenMax.staggerTo(".circleHolder", 0, {
  cycle: {
      return index * (360/numCircles);

//tween each .circle along the x axis inside of its rotated .circleHolder parent
TweenMax.to(".circle", 1, {x:200, repeat:-1})




The basic idea is that each blue .circle is in a grey .circleHolder. 

I rotate each .circleHolder around its left edge.

I then animate each .circle along the x-axis.

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