How can I achieve this effect in codepen effect (canvas) with DOM elements. Please help. I'm very confused about the working of the code.

[Dravidra Pulka 0 Likes (Newbie)]

I want to recreate this effect with DOM elements instead of canvas. I tried to understand it, but I'm confused as the DOM elements and the canvas elements are different.

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

[elegantseagulls 1,409 Likes (Superhero)]

To achieve this, you'll want to get the position of each circle and check that against the position of your cursor (or use a mouseEnter or mouseOver event listener), I think it'd be best to use something like quickTo to change position of the follow ring.

 

Docs on quickTo here:

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

[Cassie 5,069 Likes (Superhero)]

Ooooh this is a fun one.

If you pop together a minimal demo with some HTML DOM elements and give it a go I reckon you'll have a bunch of people jump in to help you.

[Dravidra Pulka 0 Likes (Newbie)]

I've tried to get it like this but I still don't understand where is the problem.

See the Pen mdjQNLY by sddvr (@sddvr) on CodePen

[Dravidra Pulka 0 Likes (Newbie)]

This one I tweaked works!!! But there is a issue. Can anyone please tell me how can attract cursor only when the cursor is at the boundary. In the example it attract before entering the boundary.

See the Pen JjBwoBZ by sddvr (@sddvr) on CodePen

[StephanNijman 2 Likes (Newbie)]

Not the cleanest code! And it could be improved a lot, but something like this seems to work!

 

See the Pen xxJmbMJ?editors=0010 by Since1979 (@Since1979) on CodePen

[Cassie 5,069 Likes (Superhero)]

That's a really nice solution and very readable! Thanks for contributing!

[Dravidra Pulka 0 Likes (Newbie)]

Thanks for the help!