ScrollTrigger - The pinned child element goes beyond its parent

[Masha555]

When there is not enough view height, the pinned child element goes beyond its parent, why does this happen and how to fix it?

 

 

This is a small demonstration of my problem:

 

See the Pen PoVbOVj by flowerrose (@flowerrose) on CodePen

[mvaneijgen]

Hi @Masha555, 

 

As you can see your end trigger (the one you've given top+=100px) has not met it's end trigger, so it will keep pinning until it has met the end trigger you've set.

 

If I understand your question correctly, you want when the section is done that the element stops pinning, so you will have to put the end trigger at the bottom of your block variable and the end trigger needs to be the bottom of the trigger (not the footer). 

 

I've modified your HTML and JS to get to the desired result. Hope it helps and happy tweening! 

 

See the Pen KKJNoEB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen