VéGé Posted September 28, 2023 Share Posted September 28, 2023 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 Link to comment Share on other sites More sharing options...
GreenSock Posted September 28, 2023 Share Posted September 28, 2023 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? Link to comment Share on other sites More sharing options...
VéGé Posted September 29, 2023 Author Share Posted September 29, 2023 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. Link to comment Share on other sites More sharing options...
GreenSock Posted September 30, 2023 Share Posted September 30, 2023 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? Link to comment Share on other sites More sharing options...
VéGé Posted October 2, 2023 Author Share Posted October 2, 2023 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: Link to comment Share on other sites More sharing options...
GreenSock Posted October 2, 2023 Share Posted October 2, 2023 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! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now