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

[Mexys]

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

[mvaneijgen]

Hi @Mexys welcome to the forum!

 

1 hour ago, Mexys said:

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.

 

 

I would make the third section part of the element you are pinning, so that they both pin with the scroll trigger set up you have.

 

2 hours ago, Mexys said:

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.

 

Personally I like GSAP to handle all my logic, so I've removed your transform .section2Left {transform: translateY(-300%);} and changed your .from to a .to, so that I can handle all my logic in GSAP. You have three elements, but only two of them need to move, so this is 100% times 2, so as you can see in the below demo the first a last image stop at the same point. Your elements are not centered by default, so I would fix that with CSS first before going to GSAP, you could wrap all you images in container and make that container the height and width of the element and center your smaller green squares in there, this way you don't have to create arbitrary margins to have them faked being in the center. Hope it helps and happy tweening! 

 

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

[Mexys]

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