ScrollTrigger.batch child animations and each batch waiting for the previous one

[SkyFall]

Hi there! 
I am using this pen from GreenSock as a reference for displaying blog posts:

 

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

 

Now I am trying to modify the code so that if you scroll down the page, the batch animation from the new row will not start until the previous one is finished. Thanks to this forum I found a solution from ZachSaucier (pen below).

 

It looks like it is using a condition with if(tl && tl.isActive()). I am trying to combine these two codes for hours now but I am failing miserably due to my limited JS knowledge. Any help would be much appreciated.

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

[GreenSock]

I read your post a few times and I'm still not clear on what you're asking. It sounds like that second CodePen does exactly what you described...what am I missing? Are you asking us to take the second CodePen logic and apply it to the first CodePen? 

[SkyFall]

Correct, how can I add child animations using the second CodePen logic?

 

This is my attempt (I'm a beginner - at the moment nothing happens at all and it show several errors in the console but I don't know how to fix them):

 

See the Pen wvXdZwL by skyfalljs (@skyfalljs) on CodePen

[GreenSock]

I'm lost - your demo is the second one, the one from Zach that already worked, right? So you already have exactly what you're asking for in his original CodePen(?)

 

If you want to apply that logic to your FIRST CodePen, here's what I assume you were looking for: 

See the Pen vYrZXKV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better?