Scrolltrigger pin last element

[TerraHQ]

Hey!
I'm having this issue that everything works as expected, but last element is stays pin on the screen and on top of the magenta/following section.

Is there any way to prevent this?

See the Pen mdKoKqp by andresclua (@andresclua) on CodePen

[Rodrigo]

Hi,

 

Just adding a position property (relative in this case) to that container, seems to fix the issue:

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

 

Let us know if you have more questions.

 

Happy Tweening!

[TerraHQ]

thank you so much for your help, but in that case is going over my pin section which is not what I want.

what I want is that once the pinned section ends, you can keep scrolling normal.

I've made another codepen, that it's better but not exactly since there is a white gap, pls take a look on a large screen.

See the Pen YzvgONz by andresclua (@andresclua) on CodePen

[Rodrigo]

Hi,

 

That's because ScrollTrigger adds the pin space for the last element:

ScrollTrigger.create({
  trigger: panel,
  start: "top top", 
  pin: true, 
  pinSpacing:  (index === array.length - 1) ? true : false
});

That conditional logic is true for the final panel, so the pin space is added there. You just need pinSpacing: false for all the panels and your final panel should have a relative position.

 

Happy Tweening!