Jump to content


offset tween path

Moderator Tag

Recommended Posts

I want to tween various movieclips over the same path. My problem is I want them to be offset so that they follow the same path but still are at a distance from each other. I searched the forums but couldn't find any offset path property. Anything you can suggest?


Link to comment
Share on other sites

Hi and Welcome to the GreenSock forums,


I'm no so sure what you mean by a "path". Are you referring to a path created by one of our MotionPath tools? http://api.greensock.com/as/com/greensock/motionPaths/MotionPath.html


If so having multiple items follow the same path with a fixed distance between them is fairly straightforward using the distribute() method.


*note all the MotionPath tools require a Club GreenSock Membership


Is your path created by using the BezierPlugin? If so you could just do a staggerTo() or staggerFrom() tween which would allow multiple objects to use the same Bezier data but start animating at different times. Let me know if you need an example of this.



Or is your path constructed by a series of tweens inside a TimelineLite/Max()?


If you could provide some code that illustrates what type of path you are using, I'm sure we can help you find a solution.

Link to comment
Share on other sites

Thanks for the info. The code I am using is:



var path01:Array= new Array({x:200, y:350}, {x:100, y:200});
 myTween=TweenMax.to(_shooterEnemy, 10, {bezier:path01}); 


I want 5 other mc's to follow the same path but at a distance from each other. you can see an example with the pic I attached on the first post. Any ideas?

Link to comment
Share on other sites

Ok, I somehow missed the image earlier.


No, there isn't anything built into the API that would allow you to have multiple objects follow the path with that type of offset. 


You could use an onUpdate callback to position the other circles relative to _shooter enemy.




myTween=TweenMax.to(_shooterEnemy, 10, {bezier:path01, onUpdate:bezierUpdate}); 

function bezierUpdate():void {

shooter1.y = _shooterEnemy.y +=50;
shooter2.y = _shooterEnemy.y +=100;
shooter3.y = _shooterEnemy.y +=150;


or you could just place the other enemies inside the object that is being tweened at the appropriate y offset. 




shooter1.y = 50;
shooter2.y = 100;
shooter3.y = 150;


you would get the same effect with better performance. 

Link to comment
Share on other sites

Thanks for the help. This method worked seamlessly although an offsetPath function would be appreciated.

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.