Jump to content
Search Community

ScrollTrigger pin spacing issue

arjen test
Moderator Tag

Recommended Posts

Hi,

 

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!

 

1385556894_ScreenShot2020-09-24at14_18_03.thumb.jpg.505afe37068618ff6ed2165e3a085b45.jpg

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

Link to comment
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 b6f163b464502cef5b5ac411394b120b by akapowl (@akapowl) on CodePen

 

 

 

Edit:

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 0c8a12d7dad6f0d497bcf766e4b7d50e by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
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 comment
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 34482ffeae2fb5872d117934fcff705c by akapowl (@akapowl) on CodePen

 

 

  • Like 5
Link to comment
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 comment
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 b2149bb50c21cc771a3a28a86120ac88 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 comment
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 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.
×
×
  • Create New...