Horizontal Scroll and whitespace beneath

[MarkD617]

I have a horizontal scroll setup that needs to be the height of 700px. however when on a larger screen size you can see whitespace beneath the pinned section, the slides all cycle through and then section below then comes up into view as the scrollTrigger ends. IS there a way to pin and not have the whitespace underneath?

See the Pen YzBEzNN by Mark-Donatelli (@Mark-Donatelli) on CodePen

[Toso]

what if you made the pinned section 100vh and the left side that contains the imgs 100vh, and then imgs will inherit width and height 100% with object-fit: cover 

 

or you can use start:'center center ' if you want to keep the imgs height 

[Rodrigo]

Hi,

 

As @Toso mentions the issue is the height of the element being pinned. Either you make that element 100vh in order to fit the screen or pin an element that wraps the element you want to animate and the next one(s), like in these demos:

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

 

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

 

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

 

Hopefully this helps.

Happy Tweening!

[MarkD617]

So basically no matter the solution, generally you have to have a container or containing wrapper that is 100vh?

[Rodrigo]

Hi,

 

Most examples and sites you see out there tend to use a 100vh height in the elements, but as shown in the demos I posted before is not mandatory and there are ways around that if needed. The simplest way, of course, is to have a 100vh container, but there are alternatives.

 

If you have any questions, we're here to help. Remember to include a minimal demo!

 

Happy Tweening!

[MarkD617]

Hmmm it seems all the examples you provided have 100vh somewhere, whether its sections around the pinned animation or above and below the container as a spacer. 

[Rodrigo]

Yeah but not the sections being pinned, those are there just to create scroll height in the document. The section being pinned is always a parent of some of the elements that you want to animate.

 

Explore, study and play with the demos in order to understand how they work, is not really that complicated.

 

Happy Tweening!