Why is there Whitespace past my Footer

[EVQ]

So First off I am new to GSAP and dang excited to use it! However I am running into an issue where I am getting a lot of whitespace after my footer. 

 

It seems to me that once the pin container stops it adds a transform:translate(); to the element div. So in this case adding 5366px to it.

 

I don't want that to happen I want to stop at my footer and not have a whole ton of whitespace after.

 

You can see in my Pen that I have pinSpacing: False, and a min-height of the trigger div. Yet it still applies the transform:translate(0px, 5366px) to the div.

 

What am I doing wrong here?

See the Pen eYxbNPK by joshdav123 (@joshdav123) on CodePen

[Rodrigo]

Hi @EVQ and welcome to the GSAP forums!

 

Thanks for being a GSAP Club member and supporting GSAP!

 

The issue seems to stem from the element you are pinning. The height of that element, the fact that you are animating a nested element on the Y axis (<div id="svgDiv">) seems to throw off all the calculations implied in pinning, which ultimately causes the issue. Pinning that element removes that space, but creates a few other challenges with your layout that you'll have to solve:

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

 

Hopefully this helps.

Happy Tweening!

[EVQ]

Thank you!