Mouse follow animation causing multiple event handler callbacks

[TPDBrendan 1 Likes (Newbie)]

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

[OSUblake 18,472 Likes (Superhero)]

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;
}

 

[OSUblake 18,472 Likes (Superhero)]

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

 

[TPDBrendan 1 Likes (Newbie)]

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