Magnetic Hover Interaction with Cursor

[Nikhil009 1 Likes (Newbie)]

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

 

https://studiomaertens.com/about

 

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

icons

 

 

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

[ZachSaucier 7,132 Likes (Superhero)]

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.

[Nikhil009 1 Likes (Newbie)]

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? 

[ZachSaucier 7,132 Likes (Superhero)]

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?

[Nikhil009 1 Likes (Newbie)]

Hey Zach,

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

Cheers

[Nikhil009 1 Likes (Newbie)]

Hello,

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

 

[OSUblake 18,475 Likes (Superhero)]

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

 

 

 

 

[mrtsrds 0 Likes (Newbie)]

On 9/7/2020 at 2:27 AM, Nikhil009 said:

Hello,

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.
 

 

 

 

Can anyone help with this? I'm having the same problem.

[mvaneijgen 1,555 Likes (Superhero)]

@mrtsrds could you start a new topic and post a minimal demo with it.