Pinning a vertical section after a horizontal section scroll

[f8xmulder]

I've been banging my head against this for several weeks and have not been able to solve, hoping someone here will have a flash of brilliance.

 

I've got a vertical scroll going into a horizontal scroll, then going back into vertical scroll.

The second vertical scroll should pin the first section as soon as it hits top left of viewport, but it's not, and I've tried various approaches to both left and top values to account for the horizontal scroll that precedes it. 

Because you can't pin inside a horizontal scroll, I've got section 5 acting as my 1vw container, and I'm calculating x and y position for section 6 so that as you scroll right (down) it approaches the left viewport. When it reaches 0, 0 it should pin #section6, but I believe the start calculation isn't correct (I've left one of my attempts commented out above to show you what else I've tried).

 

Anyone have any clue how to solve for this?

 

PS: note I'm using smooth scrollbar, which is probably accounting for some of the difficulty of making this work. 

See the Pen YPzZoOE by jelewis8 (@jelewis8) on CodePen.

[Rodrigo]

Hi @f8xmulder and welcome to the GSAP Forums!

 

There is far too much code in your demo for us to dig into it and find out what could be the issue. Unfortunately we don't have the time resources to do that, is beyond the scope of the help we provide in these free forums. On top of that Smooth Scrollbar is not a GSAP product so we can't really offer support for it, because we don't really know how it works. GSAP has it's own smooth scrolling solution: ScrollSmoother:

https://gsap.com/docs/v3/Plugins/ScrollSmoother/

 

If possible reduce the code in your demo to the bare minimum, also remove all the smooth scrollbar stuff, just check if using ScrollTrigger gets the expected result, then in the simplest possible ScrollTrigger implementation that works of your setup try to implement the smooth scrollbar plugin.