scrolltrigger Vertical and horizontal scrolling, sticky sections issue

[arekuki]

Hello everyone. I'm in a pickle.

 

Here you can see the page I'm trying to develop. The idea is: the page is divided into several sections. Upon scrolling, each section stays sticky while the next one overlaps it.

Everything would be fine, but section 3 contains several blocks with horizontal scrolling. And this section 3 doesn't stay sticky as the rest of the section.

 

I'm only a beginner in GSAP and I don't know how to fix this issue. I will be very happy for any help or advice.

 

Thank you in advance.

See the Pen PwomrQE?editors=0100%C2%A0 by arekuki (@arekuki) on CodePen.

[mvaneijgen]

I would create one ScrollTrigger for all the pinning and just create a custom ScrollTrigger for the section you want to be different.

 

Your setup also seems really elaborate. the onUpdate is a fine call back, but this is all build in to using ScrollTrigger in a tween, so moving your onUpdate logic to the tween you already created has the same effect, with out all the extra steps of having to calculate the distance using the progress.

 

Also your pin ScrollTrigger also seems not correct to me. You want to pin a section when it hits the top of the browser. First of just create a ScrollTrigger with out the tween (if you're not going to animate anything) and then just set end: "max", to have it pin indefinitely. No need for fancy calculations.

 

Via your CSS I've given section 3 some extra height (200vh), so that it takes a bit longer to scroll a the next section to come in. Now the only issue is that the stacking context of your CSS is not correct. The items in section 3 are higher then the whole of sections 4, but this you can fix with some CSS.

 

I've also placed some comments in your JS to explain certain properties, be sure to read through them.

 

Hope it helps and happy tweening! 

 

See the Pen qEBjWVg?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen.

[arekuki]

Hello.
Thank you so much for your help. 
The only think I see left us that now section 5 doesn't scroll fully, meaning we see only part of it.

Can you maybe explain why is that?

Thank you once again. You can't imagine how helpful you are

[mvaneijgen]

Take a look at this demo. This does some smart setting of the start and end trigger to keep in mind the height of the section it self.

 

Hope it helps and happy tweening! 

 

See the Pen KKpLdWW?editors=0010 by GreenSock (@GreenSock) on CodePen.

[arekuki]

So, I've tweaked a bit of the parameters and got the right results.
But there is still small issue with mobile/tablet version. Meaning, if the screen is small, box 1 and box 2 in on the the blocks of section 3 don't fit the scree.
Can you advice on this case?

See the Pen raNwBEQ?editors=0100 by arekuki (@arekuki) on CodePen.

[Rodrigo]

Hi,

 

Yeah that is mostly a CSS related issue rather than a GSAP/ScrollTrigger related one. The only solution I can think of is to make the elements wider and have less content on them.

 

You could also move the content up using the Container Animation feature:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#containerAnimation

 

Just be aware that horizontal pinning is not supported when you already have pinned the container vertically, the only to achieve that is using the

approach mentioned in this thread and the demos in it:

 

Hopefully this helps

Happy Tweening!

[arekuki]

Thank you for your advice. @Rodrigo @mvaneijgen

I do understand what you are saying, but, unfortunately, I couldn't implement it.
Making the Items wider is a problem, because of the mobile (up to 320 px).
Making the text shorter is a solution, but if we want to add long text, everything will break.

I know, I'm asking too much of you, but can you adjust the code so it will work? It's ok if you can't.

Thank you and everyone here once more for huge help

[Rodrigo]

Hi,

 

As shown in this demo you can check if the height of the content is bigger than the height of the container and use the containerAnimation feature in order to move the content up based on the horizontal position of the element:

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen.

 

Hopefully that helps getting started

Happy Tweening!