Best practice to match loop from two different timeline

[putraaa]

Hello again there,

I have Issue about matching the timeline from two different loops. My goal is I want to make the item move a bit whenever the shockwave hit. 

Currently, I'm match those two manually using a delay. In my real case, there are more items will be showed up, each of the items have their own direction. So, matching it one by one will take much time and sometimes it didn't match with the shockwave. Is there any best practice that I can use?
 

Here's the demo to help you understands my explanation.

See the Pen PovmEOj by bayu-putraa (@bayu-putraa) on CodePen

[mvaneijgen]

There is no collision detection in GSAP, so there isn't something automatically. But I would say with some math you could get this to line up. I would start by making all the values you use dynamic (duration, stagger). Also keep in mind that the a tween in GSAP by default has the ease: "power1.out", and this will make it a lot harder to line things up, because the movement is not linear. Check out the ease visualizer for more info https://gsap.com/docs/v3/Eases/CustomEase/#description I think that will be the main issue you're having lining things up. Hope it helps and happy tweening!