Jump to content
Search Community

Canvas Interaction Sticky Cursor

odell test
Moderator Tag

Recommended Posts

Ive been working on this canvas animation and I cant seem to get get the parallax / magnetic cursor that snaps to a canvas element when its within a certain radius. Not quite what to try next. I created the most minimal version that i could on codepen as my config may be the problem. Id really appreciate some help and direction on what im doing wrong and how to implement the correct solution. Im trying to have the outer cursor snap and scale up to the moving bubbles.


See the Pen gOPoGyO by trendstar (@trendstar) on CodePen

Link to comment
Share on other sites

I'm not sure about your math. Like why are you calculating angles? To see if a point is inside a circle...


// assumes x and y coords are the center
const dx = Math.abs(cursor.x - bubble.x);
const dy = Math.abs(cursor.y - bubble.y);

if (dx > attractRadius || dy > attractRadius) {
  // not inside


Here's how I'd do it. The bubbles aren't animating, but it makes no difference. It will work the same.


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



I didn't account for the delta, but here's how to do that. 





  • Like 4
  • Thanks 1
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...