Mouse point morph to object on hover

[smallio]

Hi guys,

 

I'm seeing a lot of websites use this effect as of late. Here is one - https://en.leviev-group.com/

 

I'm trying to recreate it with green sock and have managed to do it. I'm stuck applying it to more then one object though. For example if I had multiple shapes on the page, I'd like to make the mouse dot morph into them as you hover over them, with the magnetic effect I've been working on in codepen. 

 

Does anyone know of any cleaner examples or know how to do this for multiple objects?

 

Cheers,

Will

See the Pen RQwRVj by smallio (@smallio) on CodePen

[GreenSock]

I wish I had time to help you with the custom code, @smallio - it's a bit beyond what we can normally provide here in these forums which are intended to be pretty focused on GSAP-specific questions. Your code looked like it was maybe compiled from somewhere too which makes it rather awkward. Perhaps someone else can lend a hand - seems like something @OSUblake might enjoy

[smallio]

Thanks @GreenSock! I'd love if someone like @OSUblake could point me in the right direction. I'm not expecting proper help,  I just posted on the off chance someone had something they had worked on recently as most of the code is done and the part I'm looking to do is basically only Greensock (I think anyway aha) 

 

I also accidentally removed babel & didn't notice that when I posted. It's reverted now & only like 50 lines Might help if anyone is interested! 

 

I'll try and keep it a bit more on topic in future. Do you know where the best place to post things like this are?  I think it would be cool to have a sub forum where people could post their progress and contribute like a team!

 

Thanks again

 

Will

 

 

[Visual-Q]

Based on just a quick look, could you not pass the target as an array of items rather than a single item selected by id and then run the logic that detects proximity and fires the reactive animation through a loop or each to test each one individually against the cursor.

[GreenSock]

9 hours ago, smallio said:

I'll try and keep it a bit more on topic in future. Do you know where the best place to post things like this are?

 

Oh, it's totally fine to post here. It's not like we get offended or anything - I just wanted to set expectations properly (lest you or others get frustrated, like "why aren't they giving me an answer?")

 

No problem at all. If someone can pitch in and help, awesome! If you do the same for someone else, even better! That's the type of attitude we like to foster around here in general. 

 

Happy tweening!

[Sahil]

Do you mean morph into different shapes? Or just scale up when you hover certain elements? You are just using HTML, for morphing you will need to use SVG throughout your project. I just posted a demo in following similar thread, my implementation is far different than yours but see if that helps.

 

 

[Visual-Q]

The codebase is totally different but it does look like Sahil's solution would work for what you want.

 

Interesting effects, of course I am going to have to steal them.