Jump to content
GreenSock

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

Sticky Cursor

Recommended Posts

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

  • Like 2

Share this post


Link to post
Share on other sites
25 minutes ago, Hector18 said:

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

What is wrong? 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

Your links need a concrete position ...

Share this post


Link to post
Share on other sites

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

 

image.png.535571adb9daeec73e7a41fa6bacc30f.png

Share this post


Link to post
Share on other sites

How did you manage position changing onscroll? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites
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

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.

×