Start loop animation using MotionPath from the end of the path

[Anton Devyatov]

I'm wondering how to start this animation from the end of the path? I.e. I want these rectangles to fill the path from the very start. I guess, it should be something with gsap.from but I haven't figured out

See the Pen GRvLVXQ by oolczpua-the-encoder (@oolczpua-the-encoder) on CodePen

[OSUblake]

Welcome to the forums @Anton Devyatov

 

If I understand you correctly, you could just advance the progress of your animations.

 

See the Pen MWvdYQd by GreenSock (@GreenSock) on CodePen

 

[PointC]

Not PixiJS, but a couple similar demos from an older thread in case they help. The first one adds the tweens via the index in the loop and the second one uses a stagger. Happy tweening.

 

 

See the Pen pojmBKJ by PointC (@PointC) on CodePen

See the Pen ExVzqdm by PointC (@PointC) on CodePen

 

[Anton Devyatov]

Thank you @OSUblake ! Progress is definitely the right way, but in my real timeline there are several tweens and I'd like to apply it to the whole piece. Is it possible to affect not a single tween but the whole timeline? 

[OSUblake]

3 minutes ago, Anton Devyatov said:

Is it possible to affect not a single tween but the whole timeline?

 

No, it would have to be done on an individual basis, so you can do something similar to a child timeline, like in @PointC first demo, but not the parent timeline. His second demo with the stagger is probably the closest you can get by applying it to a whole animation.

 

 

[Anton Devyatov]

@OSUblake @PointC Thank you for your advice! In fact my timeline is a bit more complicated then it was shown. I have added my initial Codepen so now it's much more like my real one. I'm trying to implement proposed techniques but still haven't achieved desired behavior  Could you maybe take a look and suggest any idea?

[OSUblake]

What was wrong with using the progress like I showed earlier?

 

See the Pen ZEJNrzY by GreenSock (@GreenSock) on CodePen

 

Either way, the main idea here is that you advance an animation's progress or time to one cycle ahead and it should display as if one repeat has already happened.

[Anton Devyatov]

@OSUblake the problem with this approach in my particular case is that repeatDelay excluded from the settings and everything gets independent of currentStagger. In the full visualization there are many paths with different time between elements on them. I.e. currentStagger varies for different paths and in many cases it is longer than time rectangle needs to get from start to finish. In the suggested approach the second rectangle will appear right after the first one finishes without delay even when it's needed. Less important thing is that the path precisely divided into rectangles which also distorts the set distance between them (you can see in my example that while the first rectangle dissapears, the last one gets into the view)

[Cassie]

I've read this a few times and I'm afraid I'm not sure what it is you're after @Anton

 

I'm also pretty certain that changing the progress or time is going to be the right approach though.

[Anton Devyatov]

@CassieSorry! Let me explain more clearly. It's a simplified example, in the full version there are many paths of different length and rectangles are moving along them with different distance between them. There is a variable called currentStagger using which I set the time between two neighbour rectangles (in my initial example it is 1.76 seconds). Lets imagine, that for any path the time between two neighbour rectangles is 15 sec and the time rectangle needs to get from start to finish is 10 sec. It means that I need 5 seconds delay after the first rectangle finishes and the second starts. In the original version I got this effect using repeatDelay parameter. In the approach proposed these rectangles would go without delay coz repeatDelay isn't used. Stop! While writing it, I realized that nothing stops me from setting progress and setting repeatDelay simultaneously... Seems as I'm idiot, sorry

[Cassie]

😂 I love it when people answer their own questions!

 

Good job, (if it doesn't work, could you pop a demo in so I can see rather than have to read and comprehend.)

Thanks Anton! Good luck with your project.