Jump to content
Search Community

Mouse scroll from element in viewport to anchor

nikenko test
Moderator Tag

Recommended Posts

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

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

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

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

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...