Multiple objects staggered along bezier

[afowler2k]

Hello,

 

I have 2 sprites I want to tween along a bezier curve and then repeat, but I need the sprites to be staggered.

 

This seems simple enough to create a timeline and add 2 bezier tweens and they will follow the tween. However, I want each sprite to start at different points along the path, i.e the 1st at 0, 2nd at 1/2 along the curve. and then repeat so it looks like they are looping around the bezier.

 

If I add more sprites I want them all to follow the same path, but have them evenly spaced.

What's the best way to do this?

 

I have a codepen above (hacked from one of the demos) to show what I have so far.

 

Basically, my question is, is there a way to start a sprite 1/2 way along the same bezier as the 1st?

 

Thanks in advance,

Andy

 

See the Pen XXMRJx by afowler2k (@afowler2k) on CodePen

[GreenSock]

I think the easiest way would probably be to just create all of the tweens exactly the same, so that they go from the start of the path to the end of the path with a repeat:-1 (to make them infinitely loop), and then just alter the progress of each one to accomplish the stagger. So if you want the 2nd tween to start at halfway through the path, you'd just do tween2.progress(0.5). 

var elements = document.querySelectorAll(".whatever"),
    i, tween;
for (i = 0; i < elements.length; i++) {
    tween = TweenMax.to(elements[i], 5, {bezier:{values:[...], type:"thru"}, repeat:-1, ease:Linear.easeNone});
    tween.progress(i / elements.length);
}

Does that help? 

[Tahir Ahmed]

Here is a demo using the technique @Jack described: jsFiddle.

[Tahir Ahmed]

And of course, you can go really crazy with these ideas

Here is an update to the same: jsFiddle.

P.S. I wouldn't exactly recommend the approach though as these are all `div` elements so your browser won't really appreciate it If you really are interested in these kind-of "particle" effects, I recommend going down the canvas route. Pixi.JS is pretty amazing at that. You can use it with GSAP of course

[afowler2k]

Awesome, thanks so much for the help!