Is it a pin-spacer height issue in gsap?

[botasblk]

I am still a beginner, but I have a question.

I would like to eliminate the blank space between the childbox and the footer when the childbox has finished scrolling.

See the Pen qBMNNPM by botasblk (@botasblk) on CodePen

[mvaneijgen]

What "blank space" are you talking about? Have you seen the pinSpacing: false, property https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations. Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.  

 

Other side note, you should never animate your trigger element, the trigger element is used to calculate everything, if you then move that element with a tween these calculation will then change and it will not like how you've intended it. I thus have crated a .inner dive in your #child element and have animated that and kept your #child element as the trigger. Hope it helps and happy tweening! 

 

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

[botasblk]

Thank you for your prompt reply.

It is very informative. I will try to devote myself to it every day.

 

Quote

Other side note, you should never animate your trigger element, the trigger element is used to calculate everything, if you then move that element with a tween these calculation will then change and it will not like how you've intended it. I thus have crated a .inner dive in your #child element and have animated that and kept your #child element as the trigger. Hope it helps and happy tweening! 

I learned a lot from this part of your words.

Thank you very much.

[botasblk]

I did as you suggested, this time nesting, but the gray part of the nesting (this is member) does not stop.

 

See the Pen yLxMxdb by botasblk (@botasblk) on CodePen

[mvaneijgen]

You can't pin something that is inside something that is already pinned by another ScrollTrigger.

 

Here is a good read if you're starting out with ScrollTrigger and want to avoid common mistakes  

 

[botasblk]

Oops, I'm still a beginner, sorry, but I want to keep learning more and more!