Pinning sections while scrolling in a specific way

[Shachar Zidon]

Hello,

I've been working for a while on a homepage where the client asked me for a specific pinning effect: each section should start being pinned once its top reaches the bottom of the navbar (whose height is stored in the `--navbar-height` CSS variable), and stop being pinned after scrolling for about 150% of the section height.

 

I've tried many variants of this, but the closest I've managed to get is this, which is still wrong since it starts pinning when the bottom of the section hits the bottom of the viewport:

```

sections.forEach((section, i) => {

ScrollTrigger.create({

start: "bottom bottom",

    end: "+=90%",

    scrub: true,

    markers: true,

    trigger: section,

    pin: true,

    anticipatePin: 1,

});

});

```

 

 

See the Pen zxvmPwe by TheOnlytails (@TheOnlytails) on CodePen.

[Rodrigo]

Hi @Shachar Zidon and welcome to the GSAP Forums!

 

If I understand correctly what you're trying to achieve, perhaps something like this:

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

 

If not, please be as specific as possible regarding the outcome you're looking for and if possible, post a similar working effect, so we can have a better look.

 

Happy Tweening!

[Shachar Zidon]

Hey @Rodrigo,

Thanks for the quick response! It's almost what I'm looking for, except that instead of the pinning of a section stopping while it's still on screen, it should stay pinned for the entire duration plus a bit more, so users won't have to stop exactly on the nark in order to see the full section content.

 

Only after scrolling for about 150% of the section length, the next section should come up over it.

 

Thanks!

[Rodrigo]

On 8/31/2025 at 3:44 AM, Shachar Zidon said:

Hey @Rodrigo,

Thanks for the quick response! It's almost what I'm looking for, except that instead of the pinning of a section stopping while it's still on screen, it should stay pinned for the entire duration plus a bit more, so users won't have to stop exactly on the nark in order to see the full section content.

 

Only after scrolling for about 150% of the section length, the next section should come up over it.

 

Thanks!

Yeah, that is not possible with the elements lined up one after the other with pinSpacing: false. You'd have to manually create the space between each section using either margin or padding as shown in this demo:

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

 

Hopefully this helps

Happy Tweening!

[Shachar Zidon]

2 hours ago, Rodrigo said:

Yeah, that is not possible with the elements lined up one after the other with pinSpacing: false. You'd have to manually create the space between each section using either margin or padding as shown in this demo:

 

 

 

Hopefully this helps

Happy Tweening!

I don't mind enabling pinSpacing if that's required, I just found that it messed with my DOM so I turned it off. It can be enabled if it's needed for the animation to work.

[Rodrigo]

5 hours ago, Shachar Zidon said:

It can be enabled if it's needed for the animation to work.

Yeah the thing is that if you use pinSpacing you won't have the overlay feature of the next section overlapping the previous one, that's why I mentioned that you have to create the extra space manually using either CSS or JS (like the demo I posted in my previous post). The reason is that you can't combine pin spacing on the same element, like having a first ScrollTrigger with pinSpacing: true and then another ScrollTrigger instance with pinSpacing: false on the same element, this is not a limitation of ScrollTrigger just the way CSS works in these cases.

 

What you can do is borrow some ideas from this thread by @mvaneijgen

Perhaps create a different HTML/CSS structure and find a way to create the animation you're after in a different way in order to use a single ScrollTrigger instance that pins an entire section that has every all the sections you want to animate this way inside.

 

Hopefully this helps

Happy Tweening!