Visual-Q

Hey Beka,
 
Welcome to the forum. You could achieve these effects using a combination of 3d transforms as explained in the CSS Plugin docs:
https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin
 
and using ScrollTrigger
https://greensock.com/docs/v3/Plugins/ScrollTrigger
 
If you're new to GSAP you may want to check out the getting started section to begin with:
 
If you had code you need assistance with please make a codepen so we can see what's up.😐
 

You can do something like this but of course it's not actually distributing things like yours just overlaying them. Maybe Jack or someone will come along with some better advice. There's likely a better way to do it I'm not that familiar with this utility.
 

See the Pen MWJezEQ by Visual-Q (@Visual-Q) on CodePen

Does this do it, note as requested it starts to fade in when section 3 hits the middle however the box at that point is positioned in the center of that section which has only travelled halfway through the screen and therefore is at the bottom when it starts to become visible.

See the Pen RwKWGgq by Visual-Q (@Visual-Q) on CodePen

Not sure what you are trying to achieve but this shows z axis movement on card 2 to point you in the right direction hopefully.
 
You can find out more about how gsap handles transforms in the docs: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin
 

See the Pen bGBYMYB by Visual-Q (@Visual-Q) on CodePen

I quite like that effect from the site you showed:
 
https://www.ecwid.com/?fbclid=IwAR2ygAek1LtYvPiQbq2x8P9vOfmzGO4zKM8sQRNVySt29cSApJB2O71JtaY
 
So I figured it was a good excuse to practice my ScrollTrigger and transform skills. Kind of finicky working out the css, there's a few different ways you coudl approach that. This seems to work pretty well.

See the Pen RwadBgG by Visual-Q (@Visual-Q) on CodePen

Thanks Jack!!!
 
Worked like a charm .
 
Just added:
jQuery( window ).resize(function() { newProd_tween.progress(1).invalidate(); }); And seems to work perfectly.

Thanks PointC. I guess I should examine the docs first on things like this but the intro for 1.19.0 download at the bottom  just takes you direct to the TweenMax build  so I assumed it was included in the Max build.

Wow. As you noted that proposal opens up a lot of possibilities,. It think it should definitely become part of the core.
 
Thanks for the help! 

Awesome, thanks guys.
 
Exactly what I was looking for.

Thank you Carl!!
 
I followed your advice stripped out the tweens till I isolated the problem. Huge DUH!! on my part I was missing a decimal - I had 125 instead .125 as a time offset on one of the tweens. Pretty dramatic difference. The animation it was attached to was very subtle so I wasn't noticing the problem.
 
Only a couple of days in with Gsap but this platforms already blowing my mind. Need to keep a closer watch on my code though.
 
Thanks again.