Bills123 Posted September 26, 2022 Share Posted September 26, 2022 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 More sharing options...
mvaneijgen Posted September 26, 2022 Share Posted September 26, 2022 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! 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 26, 2022 Share Posted September 26, 2022 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 More sharing options...
Bills123 Posted September 26, 2022 Author Share Posted September 26, 2022 I appreciate the feedback @mvaneijgen and the basis to start here! I will post my final results. Thanks! Bill Link to comment Share on other sites More sharing options...
GreenSock Posted September 26, 2022 Share Posted September 26, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now