ScrollTrigger pinning: shrinking pinned section causes extra space at the end of the pinned section or create layout gaps

[AnMadwa]

I’m using GSAP with ScrollTrigger to pin a section and animate its content out (moving headings upward and fading them out).

I’m working with GSAP and ScrollTrigger to create a scroll-based animation where elements inside a pinned section are progressively moved/hidden.

The goal is:

• Pin a section (#div1)
• Animate headings out (move up / fade out) (#heading1, #heading2)
• Naturally reduce the section height of the pinned section as content disappears

However, the issue I’m facing is:

When the section is pinned, its height seems to be locked, and even after I move elements out of view (using negative margins and opacity), the section does not shrink.

This results in extra empty space inside the section but after the content of that section.
 

What I’m trying to achieve

• As elements are removed/moved out, I want the parent section (#div1) to shrink accordingly
• The next section (#div2) should move up naturally without gaps

What I’ve noticed

• With pin: true, ScrollTrigger seems to maintain the original height
• Even if content (#heading1) visually disappears, the layout space remains
• If I disable pinSpacing, the next section gets hidden underneath the pinned section

Additional Issue

I also tried manually reducing the height of #div1 while the animations are happening (based on the amount of content being removed).

However, when I reduce the height dynamically, it creates a blank space between #div1 and #div2

So I end up with:

• Either extra space (default pin behavior)
• Or layout gaps when manually adjusting height

 

What is the recommended approach to:

1. Dynamically reduce the height of a pinned section based on content changes
2. Avoid extra spacing caused by pinning
3. Keep the layout behaving naturally with following sections

See the Pen MYjxoMd by anmadwa (@anmadwa) on CodePen.

Edited April 17 by AnMadwa
Added CodePen URL

[Rodrigo]

Hi @AnMadwa and welcome to the GSAP Forums!

 

Without a minimal demo is a bit hard to know exactly what the problem could be, but by the description you provide it seems that the height of the elements is less than the height of the screen which causes the extra space after pinning that section.

 

What you can do is wrap the section you want to pin and the next section in a common parent and pin that parent element as shown in these demos:

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

 

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

 

Hopefully this helps. If you keep having issues, create a minimal demo that clearly illustrates the problem you're having.

Happy Tweening!

[AnMadwa]

Thank you. But this does not solve the issue. I added a minimal demo with CodePen. Thanks.

[Rodrigo]

OK, so the issue is not at all related to GSAP/ScrollTrigger but to the fact that you're animating the margin top property on both elements, this changes the layout of the element creating those jumps after the element is pinned. Also for performance reasons is not really a good idea to animate properties like margin and padding, better animate the transform y property instead, using either y or yPercent.

 

Here is a for of your demo using that instead of margin top and the pin is working as expected:

See the Pen qEavpda by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[AnMadwa]

Still this does not give a full solution to the problem. This is a simplified demo, but there are several lines in between the #heading1 and #heading2. For example:

 

<section class="sec1" id="div1">
  <h1 class="hed" id="heading1">Lorem Ipsum</h1>
  <h1 class="hed" id="heading1_1">Lorem</h1>
  <h1 class="hed" id="heading1_2">Ipsum</h1>
  <h1 class="hed" id="heading2">Dolor sit</h1>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>

</section>

#heading1_1 and #heading1_2 hides out in the same way as the #heading 1.

The hiding/fading sequence is first #heading1_2 then #heading1_1 and then #heading1 (the CodePen demo is updated). This creates a huge gap in between these headings  if I didn't use Margins. Thanks.

[Rodrigo]

If you keep animating margin-top you're going to keep having the same problem, the solution, as I mentioned in my previous post, is not animate margin top so you don't affect document flow:

23 hours ago, Rodrigo said:

OK, so the issue is not at all related to GSAP/ScrollTrigger but to the fact that you're animating the margin top property on both elements, this changes the layout of the element creating those jumps after the element is pinned.

Here is a fork of your demo without animating margin top:

See the Pen raMRbxB by GreenSock (@GreenSock) on CodePen.

 

If you want the blue and green sections to be visible all the time you need to wrap all three sections in a common parent and pin that parent element, something I also mentioned in a previous post:

See the Pen JoRzVGX by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!