Custom Cursor

[Vivodionisio]

Hi Folks,

I'm experimenting with a custom cursor, and have run into an issue I'm not entirely sure how to describe. 

The cursor consists of two circles that follow the mouse, using gsap.to() tweens, each with a different durations, so that circles lag is grater than the other's. Pretty strait forward. However, I've also defined trigger-zones for three target elements on the page, inside of which...

The circles should:
1. Expand to the size of the target element,
2. Whilst also changing position from mouse to target element. 

It is kind of working, but when you move the mouse into the trigger-zone with a 'quick flicking motion', the circles do grow and move into the new position, but the smaller one (whose colour is filled) promptly snaps back to its original size and presumable, its last recorded position before the mouse had entered the trigger zone. 

Anyone have any ideas what might be causing this? 


 

See the Pen qBQdqqV?editors=1111 by saulnewbury (@saulnewbury) on CodePen

[Vivodionisio]

gsap.killTweensOf() on mousemove has done the job. Animation is much smoother as well

[Cassie]

Also might want to look into quickTo and use scale instead of width ☺️

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

[Vivodionisio]

Ooh, interesting. Thanks for the suggestion Cassie. I'm just wondering about the other properties – width and height, scale etc. – I take it that if I use quickTo for the mouse position, these other properties should these be handled in a separate tween?

 

See the Pen bGxyZjK?editors=0010 by saulnewbury (@saulnewbury) on CodePen

[Cassie]

Heya!

 

So I checked your code out a little more and it could be a little more efficient.

Mouse move is a very expensive event, it fires tons and tons of times a second. At the moment you're doing loads of calculations, a loop and DOM queries in there.

If I were you I'd separate out the mouseMove and the hover events, just handle the positioning on mousemove, then onmouseover and leave you can scale up (and do your magnetic stuff)

See the Pen JjeYPoE?editors=0011 by GreenSock (@GreenSock) on CodePen

I left out the magnetism because I was just trying to keep it simple, but you should be able to snap to the position in there too. Either way, you get the idea, keep as much out of mousemove as poss!

[Vivodionisio]

This is just great. Love the simple/nifty approach to scaling.

I've just been modifying my code with your suggestions in mind and I've hit a wall with trying to get the scaling of cursor-outline to animate on mouseleave, in the way that it did before. Seems to be delayed now, perhaps due to running inside a timeline, in reverse. I realise the tweens start at the same time going forward but I can't tell whats happening going backwards. Should they start together in reverse too?

Also, there is a little more complexity in the max version, in that the magnetic effect acts on both the custom cursor and the text inside the target. So all the calculations for hypotenuse and angle are happening on mousemove, along with querying the DOM. At this point I can't see how to separate that stuff, as the 'if' condition – hypotenuse * 2 < triggerDistance – determines which text element is pulled on by the cursor. Is there an obvious way to do this that avoids this expense?

See the Pen YzRwPXz by saulnewbury (@saulnewbury) on CodePen

Thank you so much for the input. 
 

[Cassie]

In terms of the timeline, the tweens currently have different durations, you could give them the same durations, or just use tweens instead?
 

targets.forEach((target) => {
  target.addEventListener("mouseenter", (e) => {
    mouseInTarget = true;
    console.log("play");
    
    gsap.to(".cursor-outline", {
     scale: 1,
     duration: 0.2
    })
  });
  target.addEventListener("mouseleave", (e) => {
    mouseInTarget = false
    console.log("reverse");
    gsap.to(".cursor-outline", {
     scale: 0.2,
     duration: 0.2
    })
  });
});

I think what you've got now is pretty decent though, better than it was for sure!

[Vivodionisio]

On 6/14/2023 at 3:14 PM, Cassie said:

I think what you've got now is pretty decent though, better than it was for sure!

Awesome!

Ahh yes, I'll pop them in their own tweens, good call.

Thanks again for all the feedback