animating out from a center point

[icraig6666]

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 move) 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

[PointC]

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. 

 

http://greensock.com/svg-tips

 

Hopefully that helps a bit.

 

Happy tweening.

[Jonathan]

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

[Carl]

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: {
    rotation:function(index){
      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})

 

http://codepen.io/anon/pen/jqdeEE

 

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.