How to create layered pinning inside a centered div?

[HiLuLiT]

i'm trying to create this demo inside a centered div

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

I basically  wrapped it with a wrapper  overflow:hidden div and changed scrollTrigger's pinning to the center of the viewport, but then I completely lost the layered pinning effect... 
also - I only managed to center the div horizontally with margin: 0 auto, how can I center it vertically? flexbox doesn't seem to work.
here's a demo -

See the Pen BazMOdL by HiLuLiT (@HiLuLiT) on CodePen

[HiLuLiT]

I found a solution thanks for this thread and thanks to @akapowl :

I updated my demo for the implementation I needed... Thank you too @Hugo Priet


My next question would be then - I want to fade in/out the titles  on top of each slide- how can I achieve this?

[ZachSaucier]

On 11/14/2020 at 7:36 PM, HiLuLiT said:

I want to fade in/out the titles  on top of each slide- how can I achieve this?

Just add those animations to the timeline  

 

By the way I highly recommend learning more about the position parameter. In this case the "<" operator is equivalent to what you have.
Additionally you could write this code more efficiently by using a loop. I talk more about that in the most common GSAP mistakes and my article about animating efficiently.

[HiLuLiT]

Thanks for the help @ZachSaucier!
I'll defiantly read some more about that and update my demo when done