Horizontal scroll snap at the end of a section

[VéGé]

Hello,

 

I'm trying to set up an horizontal scroll snap with some sections width over than 100vw. But I can't figure out how to trigger the snap when reaching the end of my section (or beginning of the next one).

 

Help would be really appreciated

See the Pen QWzxpoG by valentin-guillot (@valentin-guillot) on CodePen

[GreenSock]

Hi @VéGé. I don't understand the question - it looks like it's snapping exactly as expected, including at the start and end. What am I missing? 

[VéGé]

11 hours ago, GreenSock said:

Hi @VéGé. I don't understand the question - it looks like it's snapping exactly as expected, including at the start and end. What am I missing? 

 

Hello @GreenSock and thanks for your response. 

 

In fact, snapping is triggered from the moment you start scrolling the section, which prevents the content from being read as a whole. The desired behavior is that we can scroll inside the section, and that snapping is triggered only when we reach the end of the section, in case the section is larger than 100vw.

[GreenSock]

Oh, so you just want to do snapping if it gets close to the very beginning or the very end? That should be pretty easy: 

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

 

Just use a function-based value. In the demo above, I let it get within 10% of the start/end before snapping (0.1). 

 

Is that what you wanted? 

[VéGé]

On 9/30/2023 at 9:34 AM, GreenSock said:

Oh, so you just want to do snapping if it gets close to the very beginning or the very end? That should be pretty easy: 

 

 

 

Just use a function-based value. In the demo above, I let it get within 10% of the start/end before snapping (0.1). 

 

Is that what you wanted? 

 

Well, It's not exactly that. The behavior in the example that I provided works perfectly on sections whose width is equal to or less than 100vw, however when it is greater, as for the "Part Two" section, the snap is triggered from the start of the scroll, preventing the reading of its contents as a whole...
Generally speaking, the snap must be triggered when the right edge of the current section appears on the screen; Here is a screenshot to illustrate all this:

[GreenSock]

Oh, I think I understand your objective now. Yeah, that'd take some custom logic in your snapping function. In other words, use your own custom function for the snapTo value and inside your function, do all the necessary calculations and return the correct value. It's definitely beyond the scope of free help we can provide in these forums because there's a lot of custom logic you'd have to map out, like what if the left side of a section is close to the left side of the viewport, and there's also a different section's right side that's close to the right side of the viewport - which one "wins"? It's all doable with custom logic. Feel free to contact us if you need our help; we do offer paid consulting services. Or you can post in the "Jobs & Freelance" forum to see if someone there can help. And of course anyone else is welcome to help here for free too. 

 

Good luck!