Jump to content
Search Community

Moving a circle along the edge of another circle

Bills123 test
Moderator Tag

Recommended Posts

Hi Everyone,

I have an animation request that involves a larger circle (#main_circle) growing and repositioning around a banner, while a smaller circle (#purple_circle) is suppose to move along the visible edge of the larger circle as it transitions.

 

You will see in the CodePen that I currently just have the #purple_circle linearly moving to it's final positions in each frame.

However, it actually needs to move along the visible edge of the #main_circle during the transitions from frame 1 to frame 2 and from frame 3 to frame 4.

 

I have spent several hours banging my head on this and have no code to show for the actual transitions.  My searches point me in the direction of using SVG paths and the MotionPathPlugin, but I will be honest,  I have been using GSAP to animate banners for a couple of years now, and every time creating and manipulating SVGs comes up, I get completely lost.  I also am not sure about the paths changing as the #main_circle grows and moves around the banner.  I would gladly avoid the SVG route if possible.

 

Any suggestions would be greatly appreciated!

Thanks in advance!

See the Pen ExLbqRG by bills1982 (@bills1982) on CodePen

Link to comment
Share on other sites

Hi @Bills123 welcome to the forum!

 

I think there is no other solution than using a SVG. The problem is that your circles are no circles, but just boxes with rounded corners, so as far as I know there is no information that you could get about the outer edge of the shape and move something along that. That is what SVG shapes are great for. 

 

It doesn't mean that you need to rebuild your whole banner in SVG, but the SVG can just be a layer in your project. Just create a SVG with the shapes in it that need the special motion path animation and leave the rest as normal HTML tags like you are used to. If the SVG is the same size as the banner I would not see what could cause troubles. SVGs can be transparent, they can move on the z-axis, so you can position them with z-index in front or behind elements. Seems like the perfect start to get your feet wet in the land of the SVGs!

  • Like 1
Link to comment
Share on other sites

1 hour ago, Bills123 said:

have been using GSAP to animate banners for a couple of years now

I can see that! that is some old syntax you're using. This isn't bad, but personally I like the new syntax way more. 

 

I did a small demo to demonstrate what is possible. I did use the new syntax though.

 

See the Pen rNvpNdy?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

You could definitely do this without SVG if you wanted to, but it requires a very different approach. Here's how I'd do it (if you don't want to use SVG): 

  • Make a "bigCircle" object that is basically in charge of rendering your big circle. It'd have getter/setter properties like scale, radius, x, y. 
  • Make a "orbiter" object that handles positioning your smaller circle. It'd have an "angle" getter/setter (angle from the center of the big circle where this small circle should sit). It can use Math.cos() and Math.sin() to plot exactly where the orbiter element should sit on the edge of the bigCircle. 
  • Add code in your setter methods does a gsap.set() (or if you want to get fancy, a quickSetter()) whenever they change. So if you animate the "scale" property of bigCircle, it sets its local property as well as the actual DOM element via GSAP. It would also tell the orbiter to update its values (because now the radius is different). 

Then you'd simply animate the simple properties of you bigCircle and the angle on your orbiter and they'd handle rendering the effects of those changes. 

 

I'm not saying this is a trivial thing, but once you see it done you'd probably think "oh, that is so intuitive/convenient". I don't have time to wire it all up for you, though. I'm sharing the general concept in case it helps. 

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