Jump to content


Mouse follow animation causing multiple event handler callbacks

Go to solution Solved by OSUblake,

Recommended Posts

Trying to use the suggested method for mouse follow animation using quicksetter and also be able to create hover animations on buttons.  It seems to be buggy when adding the mouseenter and mouseleave event handlers, though, firing multiple times - note the console logs and the scale animation that fires incorrectly.  Is there a better way to do this or should I use a different, simpler method for the mouse follow animation that won't interfere with events?  I'm assuming it has something to do with the quicksetter firing in rapid succession.

See the Pen BawGrmo by TPDBrendan (@TPDBrendan) on CodePen

Link to comment
Share on other sites

  • Solution

Just remove pointer events from the ball.


.ball {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  border: 3px solid dodgerblue;
  border-radius: 50%;
  pointer-events: none;


  • Like 1
Link to comment
Share on other sites

FYI, I added pointer-events: none to the official demo.


  • Like 1
Link to comment
Share on other sites

@OSUblake Fantastic, so simple, I had blinders on looking for a JS solution.  Thanks so much!

  • Like 1
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.