Jump to content


Question about bezier tweens.

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 need to create a couple bezier tweens and am having a bit of trouble figuring out how to get started. I apologize in advance if I am unable to explain what I am trying to do, I'm still confused on what I'm trying to do.


I need to create a bezier that spirals outward in a circle from a starting center point and one that is a full circle. I'm not quite sure how to go about figuring out the x and y values I need to accomplish this so I am hoping there is some type of math equation to follow allowing me to achieve this effect. If not, any suggestions on how I would go about doing this?


The spiral tween I also need to animation a few dozen objects along this path but only one of them will make it to the end. The rest I need to stop inline behind it, kind of like a train. Do I need to make separate bezier tweens for each item or can I have one path and have the different objects stop at specific points?


The full circle tween I'm not sure how to explain what I need. First I need it to animate a bunch of dots along the circle so it ends up as a circle of dots. Then I need to be able to change the color of the dots in order while keeping track of the index of each dot. Does the bezier tween have an onUpdate function that I could use to keep track of the index?


I hope this explanation makes sense. I'm just unsure on how to even get started with these animations.


Thanks for you time.

Link to comment
Share on other sites

The BezierPlugin can definitely handle the animation you're talking about, but the biggest obstacle is creating the anchors and control points that you need for your particular project. There isn't currently a simple tool that I'm aware of that allows you to visually draw the shape you want and spits out the Bezier data for the points you created, although I bet some exist. We hope to create one at some point down the road. The closest thing I have right now is a swf that demonstrates the BezierPlugin capabilities but it is NOT ideal for freehand drawing of paths (see attached).


If you can find a tool that allows you to draw a Bezier and get the coordinates of the anchors and control points, you can easily feed those into the BezierPlugin (it accepts data as either Quadratic or Cubic Beziers). Unfortunately I just don't have an ideal solution for you right now.


And yes, you can use an onUpdate on your Bezier tween.


Link to comment
Share on other sites

Honestly, it doesn't really matter to me if there isn't a tool that does what I need. I'm just not really sure how to even figured out what I need. I'm attaching a couple images of what I'm trying to accomplish, hopefully that will be better than me trying to explain.


The hard part with the spiral.jpg is getting all those icons to start at the same point and animate around in a curve ending like this image. Plus getting the last few to scatter away from the path. Other than just entering a bunch of random numbers for my x and y coordinates, I'm unsure of how I figure out the points I need.


The circle.jpg, those dots wont be visible at first and I need them to fade in one at a time around that circle. Then I need them to change red in order while the whole outer ring spins. The red dot with the ring around it will essentially stay in the same place while the outer ring spins, making more of the dots red behind it.


I am honestly just completely lost on how to even start trying to do either of these animations.



Link to comment
Share on other sites

Like I said, I don't have an easy solution for you, but I'd recommend just starting with a single dot and try making it animate around on a circular path. The key is to find the coordinates for the anchors and control points. You could try just using an anchor at the top, left, bottom and right side (like a diamond) and use BezierPlugin's built-in "thru" feature to draw a smooth path through those and then adjust the "curviness" parameter to get it to look more like a circle than a diamond with curved tips.


If you guys need more help on a consulting basis, let us know. This isn't really something that we can walk you through in the forums very well because of how time-consuming it could become. We're happy to answer any specific questions about the GreenSock tools, but general consulting about a particular project is beyond the scope of what we provide here. However, we really want to help you be able to accomplish what you need. Send me or Carl a PM if you need some more assistance.


Thanks for the visuals, by the way - those are helpful in understanding what you want.

Link to comment
Share on other sites

Thanks for taking the time to look at them. I'm pretty comfortable using the greensock plugin now but this bezier stuff has me stumped. I will try the thru feature and see if I can get it working the way I need.

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.