Awkward White Space Under Pinned Area Using ScrollTrigger

[jchristian_gun]

I am working on a website that requires a grid of blog posts to be pinned whilst animating in. Once they have animated in the pin ends and another section needs to follow immediately, unfortunately there is a large amount of white space between these two sections. I have turned off pinSpacing but this has had no effect. I'm not sure what else to try at this point.

See the Pen abmxKKJ by jackchristian_gun (@jackchristian_gun) on CodePen

[ZachSaucier]

Hey jchristian_gun and welcome to the GreenSock forums. The extra space is because of your yPercent tween - transforms move an element visually but not their actual position in the document flow. So when you move it vertically there is going to be space created. Does that make sense?

 

Also we highly recommend upgrading to the modern GSAP syntax - upgrading is easy!

[jchristian_gun]

14 hours ago, ZachSaucier said:

Hey jchristian_gun and welcome to the GreenSock forums. The extra space is because of your yPercent tween - transforms move an element visually but not their actual position in the document flow. So when you move it vertically there is going to be space created. Does that make sense?

 

Also we highly recommend upgrading to the modern GSAP syntax - upgrading is easy!

Ahh yeah that makes sense! What would you do instead to achieve the same effect?

[ZachSaucier]

Most likely I'd use some method of setting the parent's height to something smaller than the actual height of the content now. You could do that by giving the container an exact height, by positioning some of the children out of the document flow, or other methods depending on your exact needs. 

[GreenSock]

You may also be able to give it a negative margin-bottom or something. There are many ways to accomplish it. 

 

Were you trying to do something like this?: 

See the Pen 83c09cffe74b8ac618a2e12799ffe3c1?editors=0010 by GreenSock (@GreenSock) on CodePen