Massive whitespace below pinned elements, how do I remove it?

[donnieberry]

 

I have made an extremely barebones copy of my code.

 

Basically, the idea is, when you scroll down, the sections pin in the middle. The image moves up, the text fades out, the next section has text fade in, then that image moves up etc.

 

On the last section, after scrolling up, there is a massive gap between the bottom of the image and the red footer. I would like to eliminate this gap so that the bottom of the image sits flush with the footer.

 

I've tried messing with the end attribute, adding negative margin etc but I cant help but feel I am doing something very wrong here. Could somebody advise?

 

 

So, the end result should be, when the user is scrolling, once they reach the last section, there should be no massive gap and the image should scroll up as usual, effectively ending the pinning, and be flush with the footer. I have attached an image of what it should look like in the end.

See the Pen yLQawmN?editors=1111 by donniejrberry (@donniejrberry) on CodePen

[SteveS]

I'm not a Vue guy, so it is a bit difficult to debug. Looking at the code, I think that what's happening is you are applying your "animateOut" animation to the last element, causing the scrollTrigger to continue past the bottom of the last element.

[GreenSock]

Yeah, you're animating the y position of those elements which creates that big white space. You could just set margin-bottom: -100vh on your pinned element to compensate. 

See the Pen bGQBbVw?editors=0110 by GreenSock (@GreenSock) on CodePen

[donnieberry]

13 hours ago, GreenSock said:

Yeah, you're animating the y position of those elements which creates that big white space. You could just set margin-bottom: -100vh on your pinned element to 

That is nearly good enough, but there is still a gap at the bottom until the element is fully scrolled off the screen. I would like it if, when the user sees the bottom of the final image, it is already flush with the footer, is that possible?

[mvaneijgen]

I've changed your end value to subtract 1 item from the total number of items, this because your first item is already in view, so it should not be taken in to account. (There is still a small little gap eg 10px, but that is also when you disable everything to do with ScrollTrigger). See line 93 in your JS. Hope it helps and happy tweening! 

 

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