Jump to content


A way to set moveFrom and moveTo positions in BezierPlugin?

Go to solution Solved by Carl,

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'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?


Thanks in advance!

Link to comment
Share on other sites

  • Solution

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


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

  • Like 5
Link to comment
Share on other sites

Nice solution Carl ! :)

Link to comment
Share on other sites

Wow, that was really quick Carl! 

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

  • Like 1
Link to comment
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!  :-P


Nice solution Carl. :)

  • Like 3
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.