I've been trying to create a simple pin on ScrollTrigger, but I've no idea what I'm doing wrong.

[johndoe000]

I'm trying to do is replicate something like 

See the Pen YzXdbQo?editors=1010 by GreenSock (@GreenSock) on CodePen

. instead of the content, the whole section gets pinned. But in my case, the last (third) child, doesn't make space for the footer even though pinSpacing is false. Also, 

when the child-3 almost covers the child-2, if I scroll futher, the child-3 is pushed down a little bit and only on further scrolling covers the child-2. See the picture below, child 3 is almost covering it. And then I scroll further, look at the second picture.

 

 

See the Pen ExMZxBN?editors=1010 by green_viper (@green_viper) on CodePen

[GreenSock]

Ah, that's a CSS issue - you've got leaking/collapsing margins. The <h1> has a rather large margin on it by default, and you've got that at the very top of a container <div> that has no padding whatsoever, and no border, thus the margin on that <h1> "leaks" outside the bounds. Then, when it gets pinned, it suddenly gets contained so that it can't "leak" out anymore. 

 

One simple solution is to add a small padding-top on the container, like 1px. Or remove the margin on your leaking element(s). Or use a 1px transparent border. Or anything that'll prevent that margin from leaking outside the container. 

 

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

 

Does that help? 

[johndoe000]

I went

*, *::after, *::before{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

 

and the second issue seems to have been resolved. Thank you very much for that. But the footer still remains covered by the third child.

[GreenSock]

Oh, then just don't pin the last one: 

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

[johndoe000]

Thank you very much. I spent hours, trying to fix this.

[GreenSock]

Happy to help! 🥳