pinSpacing div

[jerryB]

I've got an animated element pinned to the viewport but scrolling leaves a space equal to the end point below; or is I turn pin spacing off, I get an awkward wiping effect I don't want v... is there a way to pin an element but remove that extra spacing? I saw other questions around this same issue, though couldn't find a solution given thanks

See the Pen xxrEyxg by jerryklunk (@jerryklunk) on CodePen

[GreenSock]

I'm not sure I understand your goal here, but things like this almost always have to do with your CSS setup. For example, in your demo you set the height of the containing element to 100vh which means that when ScrollTrigger adds padding to the pinned element, making it taller, the containing element refuses to grow accordingly. So you could set min-height instead of height, for example. 

 

Maybe this is more like what you wanted?: 

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

 

Also note that you should always set transforms via GSAP rather than just in CSS because it's more accurate and performant. See 

 

 

Does that help?

[jerryB]

thanks ... the codepen isn't exactly what's happening on the wp page; but it is that space, after the animation completes, between it and the next image, that I'm trying to reduce

[GreenSock]

I don't really understand - can you please provide a more clear demo? The simpler the better.

[jerryB]

well from the demo above; this space between the pinned animation and the image below, which in the design is just a small margin

[GreenSock]

I think you might be misunderstanding some of the CSS stuff. Here's a fork where I put a red border on the container and a green border on the <canvas>: 

See the Pen zYzoPLL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

In your earlier version, you had a translateY applied of -50%, so it was creating a gap at the bottom. That had nothing to do with ScrollTrigger. I removed that in this fork above. As far as I can tell, ScrollTrigger is doing exactly what it is supposed to and it is NOT adding a bunch of extra space (only what it's supposed to). 

[jerryB]

ah! doh! ... thanks 😃