Replicate Moving Pinned Element

[Rich Philben Cuer]

Hello, I'm trying to recreate the pinning section of Webisoft's Services Area.
Here is the link to their website https://webisoft.com/. 

Here's what I've managed to do so far.
https://jsfiddle.net/RichCuer/jskbhegv/11/

I think I've managed to replicate it, its just one thing that i couldn't wrap my head around is how did they manage to make it so that on smaller viewport heights the parent container of the items seems to be moving upwards as you scroll. This effect is made so that the item content still is readable even if they pinned it in a stacked way.

 

[Rodrigo]

Hi,

 

Maybe these demos can help you getting on the right direction:

 

See the Pen GRVawRx by GreenSock (@GreenSock) on CodePen.

 

See the Pen LYvoaNb by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Rich Philben Cuer]

Thank you @Rodrigo. I've already managed to do something like this if you saw my jsfiddle. My concern is how to make it so the pinned elements move if updwards if:

a. The content is too long to fit in the viewport.
b. There are already way too much stacked items on top that the next to be pinned item's content isnt readable anymore.

[Rodrigo]

Check the second demo

 

See the Pen LYvoaNb by GreenSock (@GreenSock) on CodePen.