I am trying to implement code from this answer https://stackoverflow.com/a/67420648/7942242 which is a circle with organic mouvement.
The thing is that, it must move only when elements are hovered.
So on mouseover
I call the function to make the movement with a parameter and the same the way out.
querySelect[i].addEventListener("mouseover", () => {
handleHover(true);
});
querySelect[i].addEventListener("mouseout", () => {
handleHover(false);
});
The function that updates the shape of my is update_blob
which is called every 20 sec like so setInterval(() => update_blob(bool), 20)
With the variable bool
from a parameter on the parent function (handleHover(false / true);
)
But I don't get why it get stuck. I've tried many ways to make it work correctly and without boolean I don't see how I could achieve my goal.
It seems like the SVG has two state sometime animated and not at the same time.
Any thought on how to make the animation only on the hover ?
Find a full codesandbox bellow ⬇️
https://codesandbox.io/s/bold-cdn-yuddw
To resume my problem
I want to get this, but only when I hover my element. When it is not hovered it should be a simple circle that does not move.