Jump to content
Search Community

Sticky Cursor

Hector18 test
Moderator Tag

Recommended Posts

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);  
})

 

 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...
  • 1 month later...
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!

  • Like 3
Link to comment
Share on other sites

  • 3 years later...
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?

Link to comment
Share on other sites

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 :) 

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