builtbymechanic

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

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?

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.

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

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

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!