ScrollTrigger image stack scrolling issue

[kodralex]

So I have a section with a vertical stack of images (coming from the bottom of the viewport) that stacks on scroll. This works fine on a small-screen device (e.g., a small laptop). But when I view it on a larger screen, it doesn't work the way I'd like.  I want all my sections together (not moving with the scroll trigger).

 

How I'd like it to work: I want to scroll down the page, pin my image stack section, start my ScrollTrigger, have the images scroll up, then once finished, unpin the image stack section and continue scrolling down the page. 

 

How it's currently working on my demo is: I scroll down the page to my image stack section, it pins. My ScrollTrigger starts, the images scroll up, then once finished, it unpins and continues scrolling down the page. But my new section is scrolling up to meet the image stack section, which I don't want.

 

It's like the .pin-spacer area is much taller than the .main-section (rather than being the same height).

 

Any ideas on how to solve this?

 

See the Pen myEvBzQ by alexkodr (@alexkodr) on CodePen.

[mvaneijgen]

Would just moving the pin to a section that encapsulates all the sections you want to pin fix your issue?

 

Hope it helps and happy tweening! 

 

See the Pen WbGeWEB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[kodralex]

Yup, it is exactly how I wanted it to work. I didn't even think of just wrapping all the sections in a pin section. I tend to over engineer in my head, only to realise the straightforward solution works best. Thanks