Horizontal scroll - Pin/Sticky location

[Critingz]

You can see we have 3 sections in the codepen, I want once you reach section 3, the scroll of the actual page to lock once you see middle/bottom of the section so you are able to see part of the heading + the whole boxes while they are being scrolled horizontally. right now the section is pinned at the top and since the font sizes and the boxes are quite big, you don't really seem them or you either see some of them. So I would want the section to lock and the boxes to start move once you see the middle and/or the bottom of the section. I played with the "start" property, but didn't achieve anything for the past couple of hours...

See the Pen ZEKMJeZ by critingz (@critingz) on CodePen

[akapowl]

Welcome to the forums, Critingz.

 

I am not exactly sure, I understand what it is you are trying to accomplish, because depending on the height of the window, there would actually be different parts visible, since you are not making use of any specific vh units with regard to your styling.

 

If all you are asking is how to trigger the ST/pin when the boxes hit the center of the window/viewport, you could just set the start to 'center center'.

 

If you are going for the effect, that everything one can see at that point should stay pinned, you would have to either wrap your content and pin that wrapper or pin the body. For later occuring ScrollTriggers within that wrapper/the body you would then have to e.g. use the pinnedContainer property since they would have no pin-spacing to respect for their start/end (since they are within that wrapper/the body) and thus be offset due to the earlier pinning.

 

But as mentioned, I am totally unsure if this really is what you are going for. If I didn't get you correctly, could you try rephrasing?

 

On a sidenote: you may be better of using the scrollWidth of the container as the value for your ST's end instead of the offsetWidth.

 

See the Pen a2e8113c67fc9e2492a56cd072517eff by akapowl (@akapowl) on CodePen

 

[Critingz]

@akapowl Thank you for your comment! It almost works, but not exactly. Depending on the size of the text and heading above the boxes, on some resolutions the boxes are either right at the edge of the bottom or some part of them is not visible 😕 I content of all boxes to be visible and probably have 30-40px white space below them. Some part of the text will be visible either way, but the boxes are important. I've tried putting some percentages, but didn't achieve anything.

[akapowl]

Whoops, I forgot to set the trigger to the boxes-container in my codepen above.

Here it is triggering when the boxes are in center of the viewport now.

 

See the Pen 1a2759655e1be78e2588b1f2465bbd0f by akapowl (@akapowl) on CodePen

 

But I still don't really understand what it is you are trying to do, sorry.  If you want specific parts of your page to be visible when pinning, no matter how small the window is in height, you will have to adjust your CSS styling to react to those height changes of the window.

[Critingz]

@akapowl This is exactly what I was trying to achieve! Thank you so much, you saved me so many headaches.

[akapowl]

Happy to help and glad that this was what you intended  

 

Please note though: it is not in dead center at this point  - and I noticed it isn't, because your .boxes_holder doesn't have a height in CSS.

 

You could just set the height of 300px on that container, too - and if you wanted, also change the height of the .box to 100% then to make things more convenient for the future.

 

Happy tweening and scrolling!

 

Edit: I just double checked - and what I mentioned above about it not being dead center does actually not seem to be the case at all - it is. Well, I was getting a different result when I wrote this - maybe it's just codepen being weird or something.

 

Edit 2:

Turns out it doesn't behave as expected after resizing the window, that's why I thought it wasn't dead center. And I can not tell you why, but it appears to be related to the pinning of the body in my example(s). So I would suggest doing the other thing I suggested before - wrapping your content and pin that wrapper instead, which appears to still be working after resize.

 

See the Pen 4012da2f46b037b3f3d44d945ab44064 by akapowl (@akapowl) on CodePen

 

[Critingz]

@akapowl thank you for going above and beyond about this! I have the case when sometimes after resizing the window, when scrolling, I get past the section with the boxes and when I reach the section after that the scroll is being locked and the animation proceeds, but of course I don't see it since it's happening when I'm on the section after that. When I refresh it's fixed, the it happens quite often. I don't know if this is some common issue or the problem is with the design on my end.

[akapowl]

That sounds like what I experienced (inconsistantly) when pinning the body.

It did not happen for me anymore when pinning a wrapper surrounding all your content.

 

Have you tried that?

If you have and it still does behave weirdly, could you post an updated demo please?

[Critingz]

1 hour ago, akapowl said:

That sounds like what I experienced (inconsistantly) when pinning the body.

It did not happen for me anymore when pinning a wrapper surrounding all your content.

 

Have you tried that?

If you have and it still does behave weirdly, could you post an updated demo please?

it's all good now, the problem was in my actual design the section below the one with the boxes had some problem and it was causing the one with the boxes to overlap it and create some weird spacings... CSS stuff - color me shocked