Search In
• More options...
Find results that contain...
Find results in...

# A way to set moveFrom and moveTo positions in BezierPlugin?

## Recommended Posts

I'm using the BezierPlugin to move elements along a path.

Now I can't figure out how to accomplish the following (please view the sketch):

I want elements A to C to move over the path, without them collide/overlap. So from the first positions as dwawn here, to the end positions as drawn.
So that means elem A moves from 0 percent to about 80% of the full path, elem B starts at about 10% (0,1 progress) to around 90% and elem C has to move from 20% of the full path to 100% of the path.
And the whole animation I'd like to loop.

I tried some things to accomplish this with staggerTo() and onUpdate() among others. And maybe something could be done by using progress on each tween, but it's getting messy quickly and I wonder if there is no easier way to accomplish this.

A] Is there any build in function inside Greensock/BezierPlugin to set moveFrom and moveTo offset positions on the path (so something like setting the from/to percentages in the drawSVGplugin)?

B] I'm also looking for a way to get the absolute length of the path in pixels to determine the right places for A,B and C to start and stop. Is there
by any chance a method available to get this absolute path length?

##### Share on other sites

Yeah, I think the progress() route is the way to go.

Start by positioning all element where A is (beginning of path)

Create a tween for each element that moves it to where Point C is (ha) at end of path

```var bezPoints = [{x:200, y:100}, {x:400, y:0}];
var tweenA = TweenLite.to(".a", 1, {bezier:bezPoints});
var tweenB = TweenLite.to(".b", 1, {bezier:bezPoints});
var tweenC = TweenLite.to(".c", 1, {bezier:bezPoints});```

set the progress of each tween so that each element (A, B, and C) are at their respective starting positions

```tweenA.pause(0);
tweenB.progress(0.2).pause();
tweenC.progress(0.4).pause();```

Next create a timeline that tweens the progress() of each tween at the same time for the same duration like

```tl.to(tweenA, 1, {progress:0.6})
.to(tweenB, 1, {progress:0.8}, 0)
.to(tweenC, 1, {progress:1}, 0)```

Check it out: http://codepen.io/GreenSock/pen/YqmEMJ?editors=0010

• 5
##### Share on other sites

Nice solution Carl !

##### Share on other sites

Wow, that was really quick Carl!

Never thought about animating the progress like that. Nice solution indeed. Thanks!

• 1
##### Share on other sites

Create a tween for each element that moves it to where Point C is (ha) at end of path

My location could vary so this may not work all the time. Ha!

Nice solution Carl.

• 3