[ScrollTrigger - TranslateY elements inside less than 100% viewport height section A with underneath section B visible]

Thank you very much @mvaneijgen, clear and accurate answer! 💡

[ScrollTrigger - TranslateY elements inside less than 100% viewport height section A with underneath section B visible]

Hello!

 

I have a usage problem and I'm wondering if what I'm trying to achieve is feasible with gsap.

 

From the CodePen demo, I am looking for the following flow:

1. Scroll the page until section 2, not being 100vh, is at the top of the viewport

2. When section 2 is at the top, scroll the 3 images in the left part. The right part must remain fixed. Section 3 must remain visible and fixed during this scroll.

3. When the scrolling of the images is finished, resume the "normal" scrolling of the page (scroll into section 3)

 

My problems:

- In the current demo, I manage to have this sticky effect and get the images scrolling. However, the section below (section 3 in blue) is not visible when scrolling the images. I tried to set pinSpacing: false but I don't get the expected result.

- At scroller_start, image 1 is well centered in the left part of section 2. I can't manage to configure the scroller_end so that image 3 is also centered in the left part of section 2, when the "normal" scroll resumes.

 

Any help would be very much appreciated!

See the Pen ExpXZGp by mexysfr (@mexysfr) on CodePen