Sticky Cursor

[Hector18]

Hi,

Can everyone help me to achieve a similar effect on mouse cursor on my existing script,  like in this pen:

See the Pen ExxobEm by g-norman (@g-norman) on CodePen

 

 

Thank you

See the Pen zYYewBy?editors=1010 by Hector18 (@Hector18) on CodePen

[ZachSaucier]

Hey Hector,

 

Sorry, but which one is your project? And what's the issue? It seems to work fine in the demos that you posted.

 

In GSAP 3 you could use the new quickSetter method to achieve this with even better performance:

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

[mikel]

Hey @Hector18,

 

That's how it could work ...

 

See the Pen bGGzreG by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Hector18]

Hi @ZachSaucier, my pen is the last on my post with "Button One" and "Button Two".

 

 

[Hector18]

Hi @mikel, this is a good example but has a bug when you leave button the ball jump to mouse cursor without ease.

 

I just added the script into my pen, but something is wrong:

 

See the Pen zYYewBy?editors=1010 by Hector18 (@Hector18) on CodePen

[ZachSaucier]

25 minutes ago, Hector18 said:

I just added the script into my pen, but something is wrong:

What is wrong? 

[Hector18]

The cursor stick where you enter over the link. It should move in front of the link

[OSUblake]

5 minutes ago, Hector18 said:

The cursor stick where you enter over the link. It should move in front of the link

 

Then don't prevent it from working. Get rid of these.

 

$(".link").mouseenter(function(e) {
  TweenMax.to('#ball',0.5,{attr:{x:positionX, y:positionY}})
  TweenMax.ticker.removeEventListener("tick", updatePosition);
})

$(".link").mouseleave(function(e) {
  TweenLite.ticker.addEventListener("tick", updatePosition);  
})

 

 

[Hector18]

The cursor stick where you enter over the link. It should move in front of the link ant stick there. The mikel example is a good start but it works only on one link and when you leave the ball do not update position with ease, it jumps which is not good

[OSUblake]

Ok, then figure out the correct values for these, for each Link. I'm not going to do it for you.

 

var positionX = $('.link').position().left;
var positionY = $('.link').position().top;

 

You have 2 links, so you are going to have multiple positions.

[ZachSaucier]

@Hector18 Going forward, please use the "fork" button when editing your demo and posting new versions so that the thread can still make sense to future users. As it is every now every embedded demo updates when you save your progress, which is not optimal because context is lost.

[Hector18]

here is the last version of my pen:

See the Pen zYYewBy by Hector18 (@Hector18) on CodePen

[mikel]

Your links need a concrete position ...

[OSUblake]

You're not getting the correct position. Check your markup.

 

[gabs]

How did you manage position changing onscroll? 

[Santosh Ban]

Any idea how can I make sticky cursor on gsap V3. Since TweenMax has been deprecated in GSAP 3. Any help would be highly appreciated.

[ZachSaucier]

@Santosh Ban There's a demo above that uses GSAP 3...

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

 

Or am I missing something?

[Santosh Ban]

@ZachSaucier Thank you for the demo link. Plus could you please give me an example how can we make it sticky to button or some text on hover?  Something like below?

 

  

On 8/22/2019 at 8:08 AM, ZachSaucier said:

 

 

[ZachSaucier]

1 minute ago, Santosh Ban said:

Plus could you please give me an example how can we make it sticky to button or some text on hover?  Something like below?

Again, the code is in the demos above. Please reference them. 

 

If you are having issues with something specific let us know.

[RobbieC]

On 11/19/2019 at 10:11 AM, ZachSaucier said:

In GSAP 3 you could use the new quickSetter method to achieve this with even better performance:

 

I just want to weight in and let @ZachSaucier know that his cursor suggestion was the answer to my cursor issue! 

I was original using a custom circle cursor that was built with jQuery and a older version of GSAP. It would get stuck on the page when you would use the mousewheel to scroll the page, so the mouse cursor would stay in its position but the circle would move with the page as you scroll with the mousewheel.

 

After a little searching I found this post and switched my cursor to the GSAP 3 quickSetter and it not only solved my issue, but the performance improved and its built with GSAP 3 so its inline with the rest of my GSAP code.

 

Thank you @ZachSaucier and @OSUblake for the code & codepen!

[AnandP]

On 2/11/2020 at 4:30 AM, ZachSaucier said:

Again, the code is in the demos above. Please reference them. 

 

If you are having issues with something specific let us know.

Hi Zach

 

We are trying to use that hover only for a section not the whole page. How do we do that?

[ZachSaucier]

6 hours ago, AnandP said:

We are trying to use that hover only for a section not the whole page. How do we do that?

You can put the element to follow the hover inside of that section and have overflow: hidden on the section. You might want to still keep the pointer move listener on the window.

 

If you are having trouble, please make a new thread with a minimal demo showing the issue and someone will be sure to help out