Jump to content
Search Community

Snap mouse to elements

ohiosveryown test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

I'm sure this is possible in a much simpler way, but the effect is essentially "snapping" the cursor to an arbitrary number of list items.

My first attempt was to follow the mouse and animate with steps but that's definitely not the right approach.

 

I guess another way to describe it is moving an element incrementally – say 6px at a time along the x-axis.

 

Any help would be appreciated.

See the Pen MWxdqrg by cmykw (@cmykw) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @ohiosveryown welcome to the forum!

 

Would setting the snap of x to 6 solve your issue? Some more info on the docs if you're interested https://gsap.com/docs/v3/GSAP/CorePlugins/Snap?_highlight=snap

 

See the Pen abMrREY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Edited by mvaneijgen
Add snap docs link
  • Like 2
Link to comment
Share on other sites

No worries, that is what the forum is for! Happy to help.

 

But yeah there is just so much already thought of for you in GSAP, it really pays to grap your favourite beverage on a rainy day and just start reading some of the documentation. You'll be surprised what tools you'll find that you didn't know you needed. 

 

Again welcome and happy tweening! 

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