Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Chris Prieto

Animated Mouse Cursor

Recommended Posts

So first off a warning, this code I found in some codepen and I cannot seem to find it again 😕
 

The little cursor wasn't staying in place while scrolling so per this thread I made the cursor div and it's follower div position: fixed instead of absolute. And that worked but now the mouse and the cursor divs aren't synced up together and after a few scrolls down the cursor divs goes down way past the cursor as you can see in codepen. Ideally I would like for it to behave like this codepen (https://codepen.io/osublake/pen/daZwpO) it is much simpler but I can't figure out how to add a lil follower div to it that behaves the same way as my codepen.

 

 

 

See the Pen xxKRyKd by ionz149 (@ionz149) on CodePen

Share this post


Link to post
Share on other sites

awwwww maaaaan ... well that is stupid simple fix haha 🤦‍♂️

 

I even feel like I might've read somewhere that was the issue now that you mention it.

 

Thanks again @ZachSaucier !

Share this post


Link to post
Share on other sites

Happy to help! 

 

I can't tell you how many hours I've wasted trying to debug what ended up being wrong variable names that are similar in JavaScript (like tl vs t1)... Sometimes it's good to just have another set of eyes :) 

  • Like 2

Share this post


Link to post
Share on other sites
38 minutes ago, ZachSaucier said:

(like tl vs t1)

 

Ha! So true. I've made that mistake several times trying to help people here on the forum with their demos. That lowercase 'l' and '1' really start to look alike after you stare at them long enough. 👓

  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, ZachSaucier said:

Just switch it to use e.clientX and e.clientY like in Blake's demo :) 

 

And switch it to use x and y like in my demo. I don't use left and top anywhere.

  • Like 2

Share this post


Link to post
Share on other sites
14 hours ago, OSUblake said:

 

And switch it to use x and y like in my demo. I don't use left and top anywhere.

@OSUblake I just tried to replace left and top with x and y and the cursors flew off in odd directions because the transitions. Once I do get that fixed it stops animating when you hover over links.

 

I was able to get a second ring that follows around using your example but cannot get the cursor to animate when hovering over link either.

See the Pen PoYWNpV by ionz149 (@ionz149) on CodePen

Share this post


Link to post
Share on other sites
16 minutes ago, Chris Prieto said:

I just tried to replace left and top with x and y and the cursors flew off in odd directions because the transitions.

 

Well that's the problem. Your CSS transform transitions are conflicting with GSAP JavaScript animations. Get rid of that addClass/removeClass stuff and replace it with GSAP animations, and you should be good. 

 

BTW. There is no need to wrap stuff in a css object. 

 

TweenLite.to($circle, 0.3, {
  x: e.clientX,
  y: e.clientY
});

 

  • Like 3

Share this post


Link to post
Share on other sites
On 8/22/2019 at 9:59 AM, OSUblake said:

 

Well that's the problem. Your CSS transform transitions are conflicting with GSAP JavaScript animations. Get rid of that addClass/removeClass stuff and replace it with GSAP animations, and you should be good. 

 

BTW. There is no need to wrap stuff in a css object. 

 


TweenLite.to($circle, 0.3, {
  x: e.clientX,
  y: e.clientY
});

 

 Okay, this is a bit over my head but I am hoping to get it eventually. I removed the css objects and the add/remove class stuff but am unsure how to replace with GSAP. I've been trying to wrap up a project so I haven't had much time to break stuff but will get back to it shortly :D

Share this post


Link to post
Share on other sites
9 minutes ago, Chris Prieto said:

I removed the css objects and the add/remove class stuff but am unsure how to replace with GSAP.

Try this :) 

 

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

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×