Jump to content
GreenSock

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

Multiple objects staggered along bezier

Recommended Posts

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

Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

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

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 :)

  • 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.
×