Jump to content
Search Community

animating out from a center point

icraig6666 test
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

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

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