Jump to content


pinSpacing div

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Screen Shot 2021-09-06 at 5.14.58 PM.png

Link to comment
Share on other sites

  • Solution

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). 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.