GSAP Custom cursor is not moving enough!

[momo12 16 Likes (Newbie)]

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 100 Likes (Specialist)]

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 16 Likes (Newbie)]

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 5,889 Likes (Superhero)]

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 16 Likes (Newbie)]

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 24 Likes (Newbie)]

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