Jump to content

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

Magnetic Hover Interaction with Cursor

Recommended Posts

Is there a way to achieve the effect of mouse hover like on the website below:




if you hover on the Work or About link, there is a magentic effect on it as well as the cursor automatically scales and positions itself in center with the link,

So far ive managed to combine two different examples together, the magnetic effect works but the cursor doesnt align properly with the




Might there be a way to make a similar effect on the Studiomaertens website above.

Kindly let me know

Thank you

See the Pen by pen (@pen) on CodePen

Link to comment
Share on other sites

Hey Nikhil. There are several existing forum threads that cover how to do this sort of thing using different techniques:

I recommend using one of those approaches instead of mixing together two that you have found.

  • Like 2
Link to comment
Share on other sites

Thank you very much Zach :)

I'm struggling a bit to combine the magnetic effect with the cursor one, as it's an urgent on the project i have to implement in.
Any chance i can get an example? 

Link to comment
Share on other sites

Two of the forums posts that I linked to above do both the magnetic effect along with the size change. What, specifically, are you having trouble with getting either approach working in your project?

Link to comment
Share on other sites

Hey Zach,

Actually figured it form one of the projects, but thank you very much for the help :)


Link to comment
Share on other sites

  • 2 weeks later...


might anyone know why the cursor is is tweening only on the last element and not on the first two, i have added a for each loop on the targeted elements but yet only works on the last one. I think it might be the if condition although it is giving true outcomes.

See the Pen bGpWmXd by nikhil-ladhani-nl (@nikhil-ladhani-nl) on CodePen


Link to comment
Share on other sites

You're loop is running the same logic over and over. It will always be the condition of the last loop.


You probably need to use a for loop with something like break or continue. See how I do it here.


See the Pen ae04f1f23935e7d7a13c823d6141dec2 by osublake (@osublake) on CodePen





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