ScrollTrigger to pin and X transform images (pin height issue)

[aok]

Hi folks I'm trying to use ScrollTrigger to pin and X transform through some images. I was using this thread as a base: https://gsap.com/community/forums/topic/37086-scrolltrigger-with-images-as-slider/ which seems to make sense but I'm having a problem in that I am scrolling through 3 images that are set to 100vh and 100vw so I thought if I set the trigger to 300vw height (3 images width) then made the pin the trigger... it would all sync up correctly however I'm getting mixed results (the pin either obscures the content below, or it's too short and the transform through all 3 images doesn't complete) so I'm unsure if I am understanding this correctly.

 

When it pins it needs to scroll through X (currently 3) number of images then unpin and continue with the rest of the site.

 

Any thoughts where I am going wrong?

 

See the Pen yLrqdQm by richardcool (@richardcool) on CodePen

[Cassie]

Heya, did you solve this? The pen looks like it's doing what you described.

[aok]

7 minutes ago, Cassie said:

Heya, did you solve this? The pen looks like it's doing what you described.

I didn't! In the pen you can see the massive gap after the images and before 'About'. There shouldn't be any gap. I can't work it out!

 

The height of the pin, and therefore the scroll length, should be the total time it takes to scroll horizontally through the images but it's not.

[aok]

Changed it up, slightly, based on one of the demos (

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

) and seems to work now. Changed the distance to scroll calculator into a function and then made the pin almost most of the scrolling content and not just the carousel container.

 

https://codepen.io/richardcool/pen/yLrqdQm