Several pinned images inside a mask container

[davidsantas]

Hi everybody!

I'm trying to reproduce this parallax images example inside a mask container:

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

, I thought that I was understanding the functionality but after some time reading and trying to understand the example with 2 images I'm lost.
There is something that I'm not getting because when I add more images to html and make a loop to iterate through them the example gets broken.
I'm frustrated because it seen very easy to do, can anybody help me?

Thanks!!

See the Pen yLrLaNz by pixelmary (@pixelmary) on CodePen

[mvaneijgen]

Hi @davidsantas

 

I've seen this demo before, but I don't know where it is from or why it was made. I would personally animate this with a css clip-path, much more performant than updating the height of an element. Below an example coming from my post how to make any card stacking effect which walks you through the process of how to create such effects and what is the logic behind it. Hope it helps and happy tweening! 

 

 

See the Pen GReQYBr by mvaneijgen (@mvaneijgen) on CodePen

[davidsantas]

Thank you very much @mvaneijgen! Sometimes to find the appropriate resource as a starting point is the hardest part.
Your example is very easy to understand.