Issue with SlideUp Panel project using scrollTrigger

[Brogrammer]

Hello, I started learning Gsap recently and I am stuck with this little SlideUp Panel I'm working on using Gsap scrollTrigger. So i have 3 scroll linked panels that slideup on each other. The 2nd panel (middle one) has a gallery that scrolls horizontally. The issue is, the 3rd panel slides up on the 2nd panel before the gallery on it finish scrolling... I appreciate y'all help in advance, thanks. 

See the Pen qBQqywR?editors=0100 by Que0 (@Que0) on CodePen

[darkus]

If you just give it pinspacing then it will work

 

In your second gsap.to (gsap.to(gallery, .... )     just change pinSpacing to true

 

See the Pen bGQBxrP by darkuss (@darkuss) on CodePen

[Brogrammer]

27 minutes ago, darkus said:

If you just give it pinspacing then it will work

 

In your second gsap.to (gsap.to(gallery, .... )     just change pinSpacing to true

 

 

 

Thanks for the response Darkus.  I still want the 3rd panel to slideup on the 2nd panel and not just the normal scroll... Finally, what situation is pinSpacing: true/false applicable? find it hard to grasp, thank

 

[darkus]

Pinspacing basically creates a blank space (a fakeout) which is the length of the pin, so in your second panel, it creates a blank space thats the length of your x translation, which is defined by the start and end positions you gave the scrolltrigger.

 

Because of that blank space the last panel stays down while you scroll through the images (the last panel is REALLY far down).

 

If you turn pinspacing off, then that blank space is not created-and the third panel is just below the second panel, as would be the case if you didnt use GSAP at all, thats why its covering the second panel so fast.

 

In your case, I'm thinking putting all of it in a timeline and then sequencing the specific times when you want things to show might be the most accurate way to do it, but admittedly i'm not an expert so i'll let them weigh in