Jump to content
Search Community

Can't Position div when Pinning it to Cursor

AsKadir test
Moderator Tag

Recommended Posts

Hi, guys!

Sorry to ask this question,

but I've got an issue for pinning div when hover a parent div.

 

As you can see in my codepen there is animation for text,

I can't centralize circle to cursor.

I tried to use offset(), but animation starts to lag.

 

Can you give me an advice, please?🙏🙏🙏

See the Pen bGVrqOO by ChicagoJostik (@ChicagoJostik) on CodePen

Link to comment
Share on other sites

Hey Aslan. 

 

A couple things are sure to get better performance:

  • Move the .offset() to outside of the mousemove listener. 
  • Use GSAP 3's quickSetter() functions instead of .set().

Besides that, you probably want to subtract out the radius of the circle. For extra speed drop jQuery ;) Also you can use a single .set() to clear both objects properties if you want.

See the Pen WNQEEmm?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Accessing offsetTop/offsetLeft triggers a layout. You're better off storing it in a variable as it won't change unless the layout changes, like on resize.

 

Also, use pageX/pageY to account for scroll position.

 

var wrapperTop = wrapper.offsetTop;
var wrapperLeft = wrapper.offsetLeft;

function cursorMove(e) {
  var relX = e.pageX - wrapperTop - radius;
  var relY = e.pageY - wrapperLeft - radius;
  
  circSetX(relX + "px");
  circSetY(relY + "px");
  
  textSetX(-relX + "px");
  textSetY(-relY + "px");
}

 

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