Snap to yPercent with scroll on mouse press down

[Gabriel Norman 1 Likes (Newbie)]

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

[GreenSock 8,117 Likes (Superhero)]

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

 

 

[Gabriel Norman 1 Likes (Newbie)]

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

[GreenSock 8,117 Likes (Superhero)]

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: 

 

See the Pen ca06c64fa7cae79f7596a90a80c71fd7?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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. 

 

[CJH87 6 Likes (Newbie)]

@Gabriel Norman Based on the site you referenced, scroll may not be your best option. Below is a pen that I modified from Sahil which may be helpful. 

 

See the Pen a5318686213e5253b1cf0f4b4df9c310 by CJHSF (@CJHSF) on CodePen

    

[Gabriel Norman 1 Likes (Newbie)]

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

 

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

 

- Gabriel