Klygor Posted November 17, 2020 Share Posted November 17, 2020 Hi people! I'm currently doing a project where I have one big timeline controlled by ScrollTrigger. I want that when I scroll a little up or down the scroll go to the next label that i have in the timeline. But I have to scroll a lot when I use snap: "labels" or it goes back. Is there any way to do what I want? I have seen codepens where you can snap to the next section but I want only to the next label. Thank you! Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 17, 2020 Share Posted November 17, 2020 Hey Klygor and welcome to the GreenSock forums. Currently ScrollTrigger doesn't have any built in functionality for this sort of thing. To do this sort of effect currently you'd need to create a ScrollTrigger, get its start and end positions, know or calculate where the labels are in terms of percentages of the total scroll distance, then in any scroll event within the relevant section disable the default scrolling and use a set scrollTo animation to get to that scroll position. It's definitely not a trivial task as is. 1 Link to comment Share on other sites More sharing options...
Klygor Posted November 17, 2020 Author Share Posted November 17, 2020 4 hours ago, ZachSaucier said: Hey Klygor and welcome to the GreenSock forums. Currently ScrollTrigger doesn't have any built in functionality for this sort of thing. To do this sort of effect currently you'd need to create a ScrollTrigger, get its start and end positions, know or calculate where the labels are in terms of percentages of the total scroll distance, then in any scroll event within the relevant section disable the default scrolling and use a set scrollTo animation to get to that scroll position. It's definitely not a trivial task as is. Wow! I thougth there was an easiest way to do it hahaha. Is there a way to calculate the percentage of where are the labels with gsap?, because I know where they are but not its percentage. I've already created the ScrollTrigger with end and start, all animations added and all labels too. Thank you ! Link to comment Share on other sites More sharing options...
jatink Posted May 4, 2021 Share Posted May 4, 2021 Hi, Is there any way to make snap work after the 0.2% change in the scroll. Currently it changes the div only after 50% change. Link to comment Share on other sites More sharing options...
GreenSock Posted May 5, 2021 Share Posted May 5, 2021 You might want to look at the "labelsDirectional" as an option (if you're using labels), or you could write your own snapping function and implement whatever logic you want. Link to comment Share on other sites More sharing options...
pr1ntr Posted May 7, 2021 Share Posted May 7, 2021 Hey, I spent hours if not days trying to figure out this exact functionality. "labelDirectional" is not documented in the scrollTrigger docs. Is this a brand new thing? Link to comment Share on other sites More sharing options...
jatink Posted May 7, 2021 Share Posted May 7, 2021 There is no doc or info about snapping function or labeldirectional Link to comment Share on other sites More sharing options...
GreenSock Posted May 7, 2021 Share Posted May 7, 2021 Sorry about any confusion there. I could have sworn it was in the docs, but you were right - it wasn't there. It is now. ✅ And yes, it's relatively new. Make sure you've got the latest ScrollTrigger (I always recommend that). 3 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