center cursor image on hover element

[pixelarchitect]

I am using GSAP to show an image on hover that follows the cursor while moving around, it all works fine but I can't get the image to 'center center' the cursor, what am I missing here?

Edit:
I accidentally updated the original codepen that had the wrong code, I don't have a back-up of the old -not working- version but if you are looking for the solution you can find it down below and read how we got there in the rest of the topic

Solution codepen:

See the Pen abWeQJa by pixelarchitect (@pixelarchitect) on CodePen

Edited August 22, 2021 by pixelarchitect
Updated the original codepen

[nico fonseca]

Hey @pixelarchitect , the problem is that you set a position from css: 
 

  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;

and when you try to animate with GSA, it will add something like transform: translate(-50%, -50%)   translate(mouseX,mouseY) to your element.

I forked your pen with some changes 🙂

See the Pen 7ff6ac5a22d58a99e0571ad53d7a2acc by nicofonseca (@nicofonseca) on CodePen

I hope this help you! 💚

[pixelarchitect]

It does, thank you so much!

[pixelarchitect]

@nicofonseca I noticed that when you add another div into the main div and hover that specific div the cursor image gets completely off track, do you by any chance know a solution for that as well? Or maybe someone else?

See the Pen PomMXKO by pixelarchitect (@pixelarchitect) on CodePen

[nico fonseca]

@pixelarchitect use e.pageX and e.pageY 🙂

See the Pen b95b6f5473d784898bae6b35472beb7c by nicofonseca (@nicofonseca) on CodePen

[GreenSock]

I'd probably use quickSetter() functions and set things up this way so the image doesn't suddenly stop when the mouse leaves the element (just my personal preference): 

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

 

[nico fonseca]

12 minutes ago, GreenSock said:

I'd probably use quickSetter() functions and set things up this way so the image doesn't suddenly stop when the mouse leaves the element (just my personal preference): 

 

 

That's very cool ! 😮

 

[Cassie]

quickSetter is awesome! 🥳

[pixelarchitect]

What an awesome solutions are presented up here, thank you all so much. I was playing a bit more with this and stumbled on a few "bugs" (dont know how to call them differently).

1. When the container has a padding the cursor image is automatically off center (the amount of pixels of the padding)
2. When you re-use the container (right after) again, it doubles that padding space

You can see the two bugs in the codepen down below.

I could resolve the padding issue by adding a -40 to the 'setY(e.pageY -40);' but I'm wondering if there is a cleaner solution, especially keeping point 2 in mind.

See the Pen ZEyzQWm by pixelarchitect (@pixelarchitect) on CodePen

[nico fonseca]

@pixelarchitect 
 

Just in case you are not aware: when you have a child with position absolute, the father needs to have position relative or fixed, otherwise the child will position itself in relation with the first father it finds with the needed positions or with the body, like in this case. Also, when you have an element with position absolute you need to set its top and left as 0 in order to force those x/y coordinates on the browser.

On the other hand, now your coordinates will be related to its container so you need to calculate the top value in relation with the base top of the container.

See the Pen 2b1d32aaa2e551b0930725caec23381b by nicofonseca (@nicofonseca) on CodePen

[akapowl]

I would probably just call it unwanted behaviour  

 

It would probably be best to set you initial transforms via gsap from the get-go - that can save you some headaches in general.

 

For what I understand it is you're going for, you could set your image to position: fixed (alongside top: 0 and left: 0) instead of absolute via CSS, and use clientX/clientY instead of pageX/pageY in your JS - that makes it work just alright for me.

 

Is that more like what you're going for @pixelarchitect

 

See the Pen 21b35858191b221e86c4a3fd79e80350 by akapowl (@akapowl) on CodePen

 

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

 

 

Edit: Just saw, Nico came back just before I was about to hit submit  

 

[pixelarchitect]

Sometimes it can just be so simple... learned a lot, thank you all so much, I think it's working as intended now

[Lounes_514]

Hello, I discovered this nice solution that I want to use in my portfolio. To give you some context, I use Webflow and custom code often. I'm learning javascript and I am new to gsap. Basically, I just wanted to add some smoothing to the cursor movement and delay to the image relative to the cursor. In the code, how can I add some smoothness and duration? 

 

Your help is very appreciated. 

 

Thank you,

[Rodrigo]

Hi @Lounes_514,

 

Maybe you could check this example that uses GSAP's quickTo() method for inspiration:

See the Pen xxpbORN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps. Good look in your project and your GSAP journey.

Let us know if you have more questions.

Happy Tweening!

[Lounes_514]

Hi @Rodrigo 

Thanks a lot for the tip and your words!

 

Have a great weekend!