Problem delay to mousemove event animation

[Wemnia 1 Likes (Newbie)]

Hello everybody,
i am trying to create a custom cursor but i am having an animation delay problem.

As you can see from the CodePen, I would like the cursor to be followed by two simple svg shapes.
I added a listner that performs my animation function every time the mouse is moved.
The movement delay of the larger circle is performed correctly, while I would like the smaller circle to follow the cursor without any delay. Unfortunately, however, by not inserting any delay, the small circle still moves with an annoying delay, and I can't figure out how to solve this problem.

Can you help me? Code optimization tips are also welcome!

See the Pen VwPBMrZ by Vallo92 (@Vallo92) on CodePen

[akapowl 5,491 Likes (Superhero)]

Hello @Wemnia

 

If I am getting you right, the 'delay' you are experiencing is actually not caused by the delay property of the tween but by the duration of the tween.

 

If you change the duration of that tween to 0.0 (it has a default duration of 0.5), you will see there will only be a very minimal delay (which is probably just inevitable due to the reaction-time of the code or something). Instead of a .to() tween with a duration of 0 you could also just use .set() there.

 

And if performance-wise you wanted to go for the absolute best approach, you might want to take a look at a method utilizing GSAP's .quickSetter() as the example by @OSUblake in this following thread does.

 

 

 

[Wemnia 1 Likes (Newbie)]

Thanks a lot for the answer! I tried to update my CodePen following the example you linked to me. Now the circle has very little delay, and that's perfect!

Further tips to improve my code are welcome!😄