ScrollTrigger pin-spacer large screen

[jrh]

Hey there,

 

Just wondering if I'm doing something glaringly wrong here.. Try and use a pinned horizontal scroll section, but the .pin-spacer element seems to add loads of height/padding bottom and throws out the layout of the page, particularly on wide monitors. But also happens on mobile when I reduce the size of the images in the horizontal section.

 

I've attached screenshots showing the layout with scrollTrigger on and off. As you can see the footer is pushed way down the page when initialised.

 

Essentially I just want those images to scroll horizontally then carry on scrolling normally at the end of the section.

 

Let me know if there's anything else I might need to share.

 

Cheers!

 

 

ScrollTrigger enabled:

See the Pen ExbWOOL by j-rh (@j-rh) on CodePen

[akapowl]

Welcome to the GSAP forums @jrh

 

8 minutes ago, jrh said:

the .pin-spacer element seems to add loads of height/padding bottom and throws out the layout of the page

 

Yup, that is how the pin-spacer works. If you do not want any pinSpacing to show, I'd recommend wrapping all your content in a div and pin that div instead.

 

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

 

 

Note, that for potential subsequent ScrollTriggers within that same container you will need to use the pinnedContainer property to make them have their starts and ends set to where you'd expect them to be.

 

pinnedContainer

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

 

Hope that'll help - happy scrolling!

 

 

[jrh]

Hey @akapowl thanks for the welcome and the quick reply!

 

So using this kind of pinned section in a page with a header, hero banner, other elements above and below plus a footer I need to wrap and pin the entire page?

 

Are there any performance issues associated with this? Feels a bit like overkill, but I'll give it a try.

[akapowl]

3 minutes ago, jrh said:

So using this kind of pinned section in a page with a header, hero banner, other elements above and below plus a footer I need to wrap and pin the entire page?

 

You wouldn't have to pin the the entire page - technically only those sections of the page that might be visible above and below that fake-horizontal section of yours at any point.

 

5 minutes ago, jrh said:

Are there any performance issues associated with this

 

I don't think there should be any performace issues, as you are not animating all of that.

 

[jrh]

Thanks so much again @akapowl, really appreciate you sharing that solution so quickly. Seems to be working well! This community is awesome.