Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nikenko

Mouse scroll from element in viewport to anchor

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 post
Share on other sites

Hey nikenko and welcome to the GreenSock forums.

 

Check out this thread that does what I believe you're wanting to do:

 

Link to post
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 post
Share on other sites

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 post
Share on other sites

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 post
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 post
Share on other sites

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 post
Share on other sites

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

×