Scrolltrigger: Overlap multiple sections with pin without "pushing away" previously pinned sections

[Pageking]

Hi all,

 

I am trying to create an effect in which I can loop through all sections of a page and make them all overlapping. This is for a site where I don't know how many sections there are per page, since that can change.

 

The effect in my codepen is almost what I want, but ideally section 1, 2 and 3 should all be overlapping at the end of the page. I have tried using "pintype: ''transform" ad setting the pinspacing to true but to no avail.

 

Can anyone help me with a solution?

See the Pen yLQagom by wouter_pageking (@wouter_pageking) on CodePen

[akapowl]

Hello there, Pageking.

 

I'm not sure, if I 100% understand what your expected outcome is, but if you want them all to be visible at the end of scrolling, you'll need to make sure, you pin the first one longer than the second one, etc.

You can define the 'duration' of the pinning by setting the end value of your ScrollTriggers appropriately.

Here is a way you could calculate things, depending on the amount of sections you have and the index of each section.

 

This example will obviously only work while all your sections have the same height of 100vh - if that changed, you'd have to calculate the end of each ScrollTrigger depending on the amount of scrollable height created by the sections that come after each respective section.

 

I hope that will help get you started though.

See the Pen abQmJZV by akapowl (@akapowl) on CodePen

 

[Pageking]

Thank you very much akapowl! This is certainly a good step in the right direction and sets me up for further solutions in the project.

 

This is all the help I needed for now!