Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ScrollTrigger pin spacing issue

Recommended Posts



ScrollTrigger is awesome! But I have ran into an issue regarding pinning. It might be due to my limited understanding of ScrollTrigger. I'd like to have regular scroll and while scrolling the images can scroll natural, but the title + sub title needs to appear if the current section is visible  . Also the section needs to snap to the center . The thing is I don't need the additional space which seem to coming from the pinning (see screenshot) 🤔. The titles are supposed be centered vertically within the current section.

I'm a bit clueless as to why this space is generated. It apparently has to do something with the start: "top 50%" because whenever I change those values the spacing moves accordingly up or down.


How do they operate together? I've tried disabling pinSpacing, but it doesn't seem to do anything for me. I'd love some pointers.


Many thanks in advance!



See the Pen abNXpXm by blkzl (@blkzl) on CodePen

Link to post
Share on other sites


Hey @arjen - welcome to the forums.


I think, it does, what you tell it to. 

It pins your item to when its top meets the center of the window.


If you change the start to 


start: "50% 50%",


you would pin it to when its center meets the center of the window, which is probably what you aim at.

You would just have to adjust the right side of your setup accordingly if you also want it to be centered on snap.


See the Pen KKzJXVm by akapowl (@akapowl) on CodePen





My pen above creates gaps between the individual ScrollTriggers, because I forgot to also change the end accordingly:


end: "bottom+=50% 50%",



This should be better


See the Pen dyMaVgy by akapowl (@akapowl) on CodePen


  • Like 3
Link to post
Share on other sites

Hello @akapowl thanks for helping (and the welcome 🙏). Appreciate it!


In your example the section snaps to the end (or start of the next section). I would like to snap it to the center of the slide itself. Also the first slide should be visible too. Any thoughts on this particular interaction?

Link to post
Share on other sites


Well, you could also stick to your original start and end for the ScrollTriggers and just translate your card__inner up on the y-axis half the amount of its height, so in your case '-35vh'.


I don't know if that is a perfect solution, but in your case it gives the desired result.



See the Pen RwavEay by akapowl (@akapowl) on CodePen



  • Like 5
Link to post
Share on other sites

Hello @akapowl thanks! Another possibily indeed. It is something I tried before, but might be actually the best solution. It feels a bit hacky though.

I finally understand where the spacing is coming from. Since I align my content vertically actual space is not added below but the content moves down because the pin-spacer creates additional padding.  One thing which bugs me is that I don't seem to understand why pinSpacing: false isn't working since ScrollTrigger always seem to create the pin-spacer div.

Link to post
Share on other sites


Hey @arjen


I doubt, that this is related to the pin-spacing.

It is just because of the natural pin behaviour.


It will become more clear if you look at this pen:


See the Pen bGpZGga by akapowl (@akapowl) on CodePen


You pin the teal element when its top hits the center of the screen.

And that is exactly what is happening.


Only you won't notice it being pinned, because a) in your setup, on larger window sizes, the trigger of the pinning will already be past the startpoint - so it will always appear in that position and b) you have no visual feedback to actually see, when the pinning happens, such as the different background-color in my example here.



  • Like 4
Link to post
Share on other sites
3 hours ago, akapowl said:

It is just because of the natural pin behaviour.


This is what I am beginning to understand.  When I remove the vertical aligning the title is at its correct positioning. 


3 hours ago, akapowl said:

You pin the teal element when its top hits the center of the screen.

Thanks for the detailed explanation. Really appreciate it! 

  • Like 2
Link to post
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.