Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
icraig6666

animating out from a center point

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. 

 

http://greensock.com/svg-tips

 

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: {
    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.

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