GSAP Custom cursor is not moving enough!

[momo12]

Sorry guys,

 

I finally found a way to reveal a div with a custom cursor. The thing is the mask is not moving enough. If you move your cursor you can see the circle stays away from the current position of the cursor. Is there a solution to fix this? Thanks a lot!

 

See the Pen PoepGrM by talewoy290 (@talewoy290) on CodePen.

[geedix]

If you mean the mask is moving too slowly, then you could specify a shorter duration for your tweens, like 

  gsap.to($middlemask, {
    x: e.clientX,
    y: e.clientY, 
    duration:0.2
  });

- it's just using the default 0.5 right now. But maybe that's not what you mean?

[momo12]

20 minutes ago, geedix said:

If you mean the mask is moving too slowly, then you could specify a shorter duration for your tweens, like 

  gsap.to($middlemask, {
    x: e.clientX,
    y: e.clientY, 
    duration:0.2
  });

- it's just using the default 0.5 right now. But maybe that's not what you mean?

@geedix It stays behind the cursor.

[Rodrigo]

Hi @momo12,

 

If you want for the element to be where the pointer is all the time, then just use a set() instance or a really short duration (less than 0.1)

 

Happy Tweening!!!

[momo12]

2 hours ago, Rodrigo said:

Hi @momo12,

 

If you want for the element to be where the pointer is all the time, then just use a set() instance or a really short duration (less than 0.1)

 

Happy Tweening!!!

The reason it doesn't work was the "Wrong initial position" of the mask div. I came up with a custom solution. changing a few pixels(100px) the current position of the cursor and assign it to the X and Y values of the mask.

[Sam Tremblay]

Hi momo!

I'm not sure I understand good, sorry for my bad english, but try position fixed on your .middle-mask element. Does help you?

 

 

Best Regards!

Sam