BezierPlugin timeline

[Breizo]

Just discovered GSAP, looks great!

I have looked into the Bezier plugin and I can't confirm if the time between each point is required to be constant.

I am dealing with timed points not necessarily equally timed, e.g.  a sequence may have points at 0, 1, 2, 5, 7, 10, 15 sec. 

 

Is there a way to deal with this constraint?

Thx

[GreenSock]

I'm not quite sure I understand what you're looking for, but by default the BezierPlugin automatically applies a special algorithm that ensures motion along the path is equally proportioned. So, for example, if you have 2 points that are very close together at one end and then the next point is very far away, the object will move smoothly. With many other bezier tweening solutions, they just split the time equally between the points which can lead to things looking odd because they suddenly speed up or slow down based on the distances. 

 

Does that answer your question? Feel free to play with the Plugin Explorer that was built for the Flash version because it works exactly the same way. Scroll about halfway down the page at http://www.greensock.com/v12/ and you'll see the plugin explorer. Click the "EXAMPLE" button next to bezier and you'll see an interactive tool. 

 

Enjoy!

[Breizo]

Thanks for the quick answer and sorry I haven't been clear enough. 

 

I have an array of triplets (x,y,t) where x and y are the coordinates and t is the time. Let's take as an example (0,0,0),(0,1,1),(1,1,10),(0,0,100). That means that at 0 sec I am at 0,0 then at 1 sec (0,1) and at 10 sec 1,1 to finish back at 0,0 at 100 sec. 

Is there a way to implement this?

[GreenSock]

So you don't care if your object speeds up and slows down on the different segments of the Bezier? BezierPlugin is intended to work with individual tweens, each having their own duration thus you wouldn't have one Bezier that's split between multiple tweens, BUT, I have good news: BezierPlugin exposes some useful tools so that you could, for example, use its BezierPlugin.bezierThrough() method to calculate a Bezier path that goes through your values (just the x/y ones, not the time). It spits back cubic Bezier data (or quadratic if you prefer) that you can then use to feed into your tweens on a per-segment basis. For example, let's say you feed in 4 x/y points and it calculates the Bezier, sending you 4 cubic Bezier segments back. You could then create 1 tween for each segment and set the duration of the tween to your values. That way, you have one smooth Bezier path and 4 different tweens, all with the correct timing in place. Heck, I'd even use TimelineLite to easily sequence them and then you can control the entire thing as a single unit. 

 

See the docs on BezierPlugin here: 

http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

[Breizo]

Jack, 

Thanks,

let me take a stab at a simple example to make sure I got the concept and come back to you.

[Breizo]

Jack,

Hmm, thinking about it, I am afraid the concept will not work as I have 100s/1000s of segments.

 

I looked at the source code for the Bezier plugin and the setRatio function looks very promising. 

 

Is the best practice to create a custom plugin based on Bezier where I override the function and inject the time table, or can I use Bezier and replace the setRatio function during the initialization phase?

 

In the function I can select the current segment based on the time table instead of the segments length.

 

Thanks