[MotionPathPlugin with delay between each object]

Exactly like this, you're amazing Craig. Thank you.

[MotionPathPlugin with delay between each object]

Not exactly, in the demo you provided, the opacity starts from 0.3 and goes to 1 throughtout the length of the path. What I would like to achieve is being able to start from 0.3 opacity, but reaching opacity of 1 halfway through the path.

[MotionPathPlugin with delay between each object]

That's an interesting solution, I'll try to see if I can make use of it. By the way, is it possible to set a property based on the MotionPath progress? I'm trying to control the opacity of the animated objects, by setting the opacity from 0 opacity at 0% to 100% opacity at 30%. I know on ScrollTriggers, i can control that using the onUpdate, but can't seem to find any ideas on how to do it on MotionPaths

[MotionPathPlugin with delay between each object]

Yes, everything is butter smooth now. I was planning to add the elements into SVG once I got it to work. Anyway, thanks for the help. You're amazing

[MotionPathPlugin with delay between each object]

Made a quick demo of what I want achieved, the animation I have is not smooth. Each animation feels like theres a small delay between before it loops again. What's the correct or better way of doing this? Any help is appreciated. Complete beginner here

https://codesandbox.io/s/pedantic-gauss-ieftzd?file=/src/App.js