L
L
Leeroyka2021-06-16 12:14:53
css
Leeroyka, 2021-06-16 12:14:53

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

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 the question

In order to leave comments, you need to log in

2 answer(s)
R
RAX7, 2021-06-16
@leeroykahikki

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.

D
Dmitry Markov, 2021-06-16
@En-Tilza

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question