GSAP and Scroll Trigger causing large white space

[wharvey]

Hello, 

I'm new to GSAP and have run into some problems. As you can see in the codepen scroll trigger is adding huge whitespace under a set height section. This is a problem for both mobile and tablet.

I've tried everything but can't seem to remove it.

 

Your guidance will be much appreciated.

 

Thanks

William

 

See the Pen mdavRxg by w-harvey-staysure (@w-harvey-staysure) on CodePen.

[mvaneijgen]

Hi @wharvey welcome to the forum!

 

ScrollTrigger needs this white space to create the effect that everything stands still. You could change this several ways, but the easiest is to wrap your content in a an extra section which you want to have pinned. You could also try to pin the body, or change the pin points to include the previous red divs, pick the one that best suits your project. 

 

Hope it helps and happy tweening! 

 

See the Pen jOXdGwd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[wharvey]

Genius! thank you for your time assisting with this. It's very much appreciated.

[wharvey]

Pinning the body worked a charm.

pin: "body",