scrolltrigger ScrollTrigger Pin Spacer creates additional height at the bottom

[ysk]

Hello,

 

I have a simple implementation of ScrollTrigger that pins a heading while scrolling until the next one comes in.

All nice and good but I'm getting extra space at the bottom.

Can someone help me please.

 

Thank you!

See the Pen VwNxwJq by 44db (@44db) on CodePen

[Rodrigo]

Hi, I'm on my phone now but for what I can see in your code Scrolltrigger is doing what is supposed to.

 

You can try with the pinSpacing config option set to false. From the Scrolltrigger docs:

pinSpacing
Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false.

 

Hopefully this helps

Happy Tweening!

[ysk]

On 4/6/2024 at 4:52 PM, Rodrigo said:

Hi, I'm on my phone now but for what I can see in your code Scrolltrigger is doing what is supposed to.

 

You can try with the pinSpacing config option set to false. From the Scrolltrigger docs:

pinSpacing
Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false.

 

Hopefully this helps

Happy Tweening!

Hello Rodrigo,

 

Thanks for the reply. Setting pinSpacing to false makes no difference.

Anymore ideas. If you find the time please have a look on the shared codepen to get an idea of the situation.

 

Thank you so much

Yannis

 

[Rodrigo]

Hi Yannis,

 

I can't really tell you what's the issue, but definitely is tied to the CSS you have in your setup.

 

This demo does the same thing without any issues:

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

 

Unfortunately we don't have the time resources to start fiddling with your CSS and HTML trying to figure what could be the issue, but this is most likely not related to either GSAP not ScrollTrigger.

 

Happy Tweening!

[ysk]

@Rodrigo thanks for your reply.

In no way I'm posting so you can fiddle with my css, I'm only hoping that something might be extremely more obvious to others than me.

 

You' re right about the css, It looks like the height 100% that I used in the absolute positioned pin element caused the extra height. I changed that to bottom: 0 and it worked as expected. 

 

See the Pen QWPmLwV by 44db (@44db) on CodePen

 

Thanks for all your help.