Vertical and horizontal scrolling without full screen

[Sixela]

Hello
I'm trying to create horizontal scrolling as an extension of the initial vertical scrolling.

The horizontal scrolling animation works the way I want it to but the .pin-spacer causes unwanted spaces. Also, it goes over my lower block.

How would you solve?

thank you
Sixela

See the Pen XWeaJON by SixelaNr (@SixelaNr) on CodePen

[akapowl]

Hello and welcome to the forums @Sixela

 

Thanks for providing a demo - the original pen I created this fake horizontal-scrolling scenario for, was purposed to show 'faked pinning' so it has a whole lot of stuff that you don't actually need if you are just going for the fake-horizontal scrolling approach and nothing more - it's best to de-clutter things to the bare minimum, so when somebody tries to help, they won't have to scan through all that code and find what's relevant to solve the actual issue at hand.

 

That said, one thing you should definitely change is the end of the pinning ScrollTrigger, because now it is using an absolute value as the position to stop the pinning, while you would rather want an end relative to its start if you have scrollable content above it - just use the "+=" as it is being used on the other ScrollTriggers.

 

Then you will also have to make sure to have enough space to scroll through in the first place. If you have a section up top with a height of 200px, it doesn't make that much sence to pin the horizontal-section when its top hits 100px above the bottom of the window. That is where the pin-spacing is kicking in while pinning the section where you tell it to - thus it will appear at the bottom with all that white space above it.

 

It's also best to set at least a min-height (if you don't want to set an absolute height) on the element you are pinning, so the element you're pinning will get released in the correct position and not too early - because the duration of the pin added to the pin-spacer as padding will add up to the height of that element and if that element has no height set, it might not get released when you expect it to.

 

That latter point will actually not be that relavant if you don't want any pin-spacing to be visible whatsoever, because then the approach to go for would be to wrap everything in your markup and pin that wrap instead as I have done in the pen below.

 

Note, that I have also made some changes in that pen with regard to box-sizing and the dimensions of the boxes, so the calculations of the width have changed a bit (as it was actually not working as I expected). Hope that'll help a bit.

 

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

 

[Sixela]

Thanks for your quick return.

I managed to implement this code in my final site.