Jump to content

Gabriel Norman

Snap to yPercent with scroll on mouse press down

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



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

Welcome to the forums!


I'm not sure I understand your question here, but if you want to make yPercent -20 whenever it's between -20 and 0, you could use ModifiersPlugin like this: 


See the Pen 99ab1db29695fdf2c50117e94ba603d6 by GreenSock (@GreenSock) on CodePen



  • Like 1
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

Thanks a lot guys that's what I was looking for!


I'm happy to see such a great and helpful comunity.


- Gabriel

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