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!