Critingz

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

@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 This is exactly what I was trying to achieve! Thank you so much, you saved me so many headaches.

@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.

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...