Jump to content
Search Community

Snap to yPercent with scroll on mouse press down

Gabriel Norman test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Greetings,

 

I'm fairly new to GSAP and I would like to know how to implement a snap method so that when the translate of the wrapper is between 0 and 20% it goes automatically to 20%, like a classic snap to a point.

 

PS. a lot of the code has been forked from Sahil89

 

Thanks in advance for the help.

 

- Gabriel

 

 

See the Pen QVXzzz by g-norman (@g-norman) on CodePen

Link to comment
Share on other sites

Hi and thanks for your reply,

 

I will show you an example so that you guys can get a better perspective of what I would like to achieve.

 

In this website, https://www.makereign.com/, if you hold with your mouse button a menu will appear with 5 categories, and as you can see it resembles to what I'm making.

 

The thing that I'm trying to do is the same "snap" to the closer category based on where the scroll is.

 

Is there a simple way to make it with GSAP?

 

Many thanks

 

- Gabriel

Link to comment
Share on other sites

I still don't think I quite understand, but if you want to scroll to the tween's 20% progress point whenever the mouse is released and the position is less than 20%, this seems to work: 

 

 

But if you're trying to get it to scroll so that it exactly centers the <p> that's closest to the center (when the mouse is released), that's an entirely different beast. Possible, but not as easy. 

 

  • Like 3
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...