How to fix the animation bug on a sudden interruption of Anime JS?

Question

css

There are elements with the class cards-item that need to be animated hover. I do this by handling the events "mouseenter" and "mouseleave", and the animations themselves are applied using the anime.js library



If you play the animation back and forth, then everything works fine, but if you trigger the mouseleave animation and return the mouse to the element (i.e., trigger mouseenter) before the mouseleave animation ends, then the animation will not go smoothly, as it should, but abruptly pause for a second, and then set the end values ​​of the animation.

Video with a bug

https://www.youtube.com/watch?v=B02N4nMcryY

Looking at the developer tools, you can see that during this bug, the background animation works fine, but the shadow animation freezes and abruptly sets the end values ​​at the end.

How can this be fixed?

Answer 1

This is a bug of the library itself, it is not possible for it to parse values ​​normally filter: drop-shadow.
You can fix it by animating it into an object and then updating the properties of the element itself.

Answer 2

Why use a whole lib to add a shadow to a block?
Make a hover with css