ScrollTrigger: min-height on pinned item issue

[builtbymechanic]

I have 3 sections inside of a container, each is set to 100vh with a min-height (so content won't get cut off at extreme panoramic/landscape aspect-ratios), but when the 1st item gets pinned it doesn't seem to honor the min-height. The way to test this is to check out the Codepen above and reduce the height of the viewport to something less than 900px (what the min is currently set to).

 

I've been toying with it all afternoon and can't seem to figure out how to keep the overall content from getting cut off, any help would be greatly appreciated.

 

Thank you! 

See the Pen abNNZxY by built-by-mechanic (@built-by-mechanic) on CodePen

[ZachSaucier]

Hey builtbymechanic and welcome to the GreenSock forums. 

 

They all seem to have a height of 900px which is the minimum that you set. But if the viewport is smaller than 900px then the content that you have centered is not going to be in the center (and it may be cut off depending on the height). What's your goal? Perhaps if you describe that we can better help.

[builtbymechanic]

Thank you @ZachSaucier! I'm really just wanting to make sure that the min-height for each section never goes under 900px (in this case) which would mean the "scroll-wrapper" would be min-height 2700px (scrollable area). The above is just an example but if you imagined that each one of those sections was filled with text that needed at least 900px in height to view, I wouldn't want any of the copy to get cut off. The centered copy in there currently is just example text to see which section is being scrolled currently (for testing only).

[ZachSaucier]

You can use your developer tools to see that the scroll-wrapper is indeed 2700px in height no matter how short the viewport's height is. So what's your question/issue?

[builtbymechanic]

I think since the pinned item is set to fixed (I'm guessing, not 100% what's going on under the hood) you will never see what is beneath the viewport, it might just be a limitation in the way that I'm thinking about pinning. Here is a better example (video) which shows the pinned element being cut off (uses same styling as codepen example above)...

 

https://www.dropbox.com/s/2sc04uqapclb7t3/kapture 2020-08-14 at 17.14.17.mp4?dl=0

[ZachSaucier]

Ya, that's not an issue with ScrollTrigger, that's just an issue with your styling (it doesn't fit in the given height). So you should adjust it until it does (if it's that important to you - not many people view web pages in wide but short windows).

[builtbymechanic]

Ok thank you I didn't know if there was a way to pin an element while still allowing it to scroll if it's min-height was taller than the viewport. I think my intended effect would be that once you get to the bottom of the scrollable area (onLeave) it would then allow the rest of the pinned item to scroll now that it was released, as opposed to being cut off since there was a minimum height set. Not sure if that makes sense. Thanks for your help.

[builtbymechanic]

To add to the above, if I remove or comment out ScrollTrigger then "#scroll-section-1" will never be cut off since it has the minimum height set, even when the viewport is set much smaller, it's only when I add in pinning that the height of "#scroll-section-1" doesn't honor the min-height set. I would assume this is due to it being set to fixed or maybe the min-height is being overridden by the viewport height?

[ZachSaucier]

4 minutes ago, builtbymechanic said:

it's only when I add in pinning that the height of "#scroll-section-1" doesn't honor the min-height set. I would assume this is due to it being set to fixed or maybe the min-height is being overridden by the viewport height?

Not at all - the minimum height is still set. The content is just out of the viewport. If you keep scrolling you will still see it (unless it's covered by later elements).

[Visual-Q]

Okay I think I get what you mean and maybe what is behaving badly. 

 

Did you mean that the pinned element ends up extending past it's parent. i.e into the next panel.

 

I thinks what happening is  the start and end of the scrollTrigger happen when the parent hits the top and bottom of the viewport.

 

However the pinned child is larger than the viewport and therefore you have caused it to be offset(overflow) past the bottom dimensions of it's parent when ScrollTrigger ends. Thus the image extends past the end marker which is actually the bottom of the scrollwrapper parent.

 

Set #scroll-wrapper{overflow:hidden} and you'll see what I mean, the image is no longer visible past the end marker.

 

Addendum: And as Zach pointed out, if you've set an element to have a minumum height greater than the viewport, then it will not all fit in the viewport. ScrollTrigger won't change that.

 

[builtbymechanic]

Ok thank you that makes sense, seems to be just an oddity, thank you so much for your help.