ScrollTrigger horizontal scrub - I do not want to use pinSpacing

[braunsock]

Hello. I would like to trigger the horizontal scroll animation, but not use pinSpacing. But with pinSpacing set to false, the page scrolls underneath the pinned part.

 

The part that scrub animates horizontally is shorter than the viewport height, and I want the content beneath it to remain still and visible while the horizontal scrub animation is happening.

 

Is this possible? In my CodePen, I've tried using the pin: property on a wrapper, but this doesn't work. Its stops scrub animating too early. This seems to be because the page runs out of vertical scroll. I can added a bunch of extra vertical page length - but is this necessary? 

 

Any suggestions would be appreciated!

See the Pen wvxbMOE by dan_default (@dan_default) on CodePen

[braunsock]

PS: I've noticed that every example I've found of ScrollTrigger/scrub/switch to horizontal scroll thing is displaying the scrolling part at 100% viewport height.

 

Should I not even be trying to do this?

[GreenSock]

You've got a collapsing margin issue (you've got margins on child elements that leak outside their parent container which uncollapses on pinning). I just added a 1px padding on the container, but you could do a 1px transparent border if you prefer. 

 

See the Pen KKxdwwE by GreenSock (@GreenSock) on CodePen

 

I'm curious why you want pinSpacing false. Doesn't the demo above deliver the effect you want? And you wouldn't have to calculate the extra space manually. 

 

I hope that helps!

[braunsock]

5 hours ago, GreenSock said:

I'm curious why you want pinSpacing false

I didn't know any better  . I've now worked out how to do exactly what I wanted to do with your help, and less math! Thank you! The collapsing margins problem was not even on my radar yet - but I understand this has to do with that wrapping element that pinSpacing adds and perhaps more?

[GreenSock]

6 hours ago, braunsock said:

but I understand this has to do with that wrapping element that pinSpacing adds and perhaps more?

It's not that it adds more. It's just that the pinSpacer element is set up in a way that'd protect against margin collapsing. 

Here's a simple CodePen that shows the issue - try enabling the padding-top: 1px on the .container element and watch how differently things render: 

See the Pen MWqamPO by GreenSock (@GreenSock) on CodePen

 

The same happens if you put any border on the .container (instead of padding)