Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AslanGoi

Can't Position div when Pinning it to Cursor

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@ZachSaucier Hey, Zach!!!

Thanks a lot!!! I will come to javascript one day!

To be honest I'm learning javascript only half a year,

including react js and php)

Share this post


Link to post
Share on other sites

@OSUblake Hi, Blake!

I left this issue for later, but you've already resolved it!

Thanks a lot!!!

 

  • Like 1

Share this post


Link to post
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.

×