nikenko Posted October 6, 2020 Share Posted October 6, 2020 Hi, i’m trying to achieve this behaviour and im googling without any luck for the past few days. Seems easy in theory so im just wondering if it is possible with gsap / scrolltrigger. -while .div1 is in viewport first mouse scrolldown will scroll to the next anchor point (.div2) basically my first two sections on website im working on are full height and width, i have button there that scrolls to the next section and im trying to bind this scroll tu function to mouse wheel as well so you cant stop scrollimg between tho sections and first scroll takes you straight to the nech anchor point. After that scroll behaves nornally again. im using gsap3 scrolltrigger integrated via proxy with locomotive scroll. does anyone know if this is possible? thnaks a lot for any help:) Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 6, 2020 Share Posted October 6, 2020 Hey nikenko and welcome to the GreenSock forums. Check out this thread that does what I believe you're wanting to do: Link to comment Share on other sites More sharing options...
nikenko Posted October 6, 2020 Author Share Posted October 6, 2020 Thanks a lot, i tried everything mentioned there, but it all uses gsap scrollToPlugin and i cant make it work with locomotive scroll. scrollTrigger is working fine since i used scrollTriggerProxy for communication between locomotive scroll and scrollTrigger. Is there some proxy for scrollToPlugin or some way that scrollToPlugin will work with locomotive scroll as perfectly as scrollTrigger plugin does ? Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 6, 2020 Share Posted October 6, 2020 GSAP doesn't have a plugin for ScrollToPlugin in smooth scrolling libraries, no. But libraries like Locomotive have their own "scrollTo" methods. For example see the scrollTo method of Locomotive. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 6, 2020 Share Posted October 6, 2020 With that being said if all of your page is using snapping then there's no point in using smooth scrolling. It would only make sense if some of your sections are using snapping. Link to comment Share on other sites More sharing options...
nikenko Posted October 6, 2020 Author Share Posted October 6, 2020 Yes, that excatly the case, i want to achieve snapping on only the first two sections and after that smooth scrolling. And yes, i know that locomotive has scrollto method, but i can only make it work as click function. Dont know how to bind it on mouse scroll when section is in viewport, thats why i was trying to use gsap plugin, since i already use scrolltrigger with locomotive. I was working with this demo i found here on forums: See the Pen MWyQeOd by Narendra_verma (@Narendra_verma) on CodePen But failed when i tried to make it use locomotives scrollTo instead of scrolltoplugin like it is using Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 7, 2020 Share Posted October 7, 2020 Can you please make a minimal demo of your situation including the smooth scrolling? You might be able to still use the ScrollToPlugin so long as your target is correct. Link to comment Share on other sites More sharing options...
nikenko Posted October 7, 2020 Author Share Posted October 7, 2020 Sure, i made two. Here is first with loco scroll and exact layout of start of my website and scrollto is disabled: See the Pen eYzYemY by najkenko (@najkenko) on CodePen here is the same one but with that scroll to code enabled and it immediately breaks website: See the Pen WNxNZoM by najkenko (@najkenko) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 7, 2020 Share Posted October 7, 2020 I tried for too long and couldn't get it working. I would try using some other approach or dropping the smooth scroll. If you find out its an issue with GSAP then please let us know and we'll look into it. But from what I can tell it's not an issue on the GSAP side. Side note: Please don't comment things with a triple slash - just use a double slash. That way you can select multiple lines and press Ctrl/Cmd + / and uncomment it all 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