Jump to content
Search Community

Problem delay to mousemove event animation

Wemnia test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

 

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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!😄

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...