0

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.

0

1 Answer 1

2

When you set the interval, you're supposed to provide a function to call on each 'tick', you instead provide the outcome of a function-call:

setInterval(update_blob(bool), 20);

which should be:

setInterval(() => update_blob(bool), 20);

This will fix it for you. However, may I recommend you rewrite the function to use requestAnimationFrame instead? With setInterval, should the browser be under load, your function might exceed the 20ms interval, stacking up multiple calculations, further increasing the load of the device... Using requestAnimationFrame you get time to run your function as soon as the browser deems it has time for you, and at the end of your calculation, you call the next frame, a much safer practice...

1
  • Thanks for your answer. It does unlock but it does not make the animation only on the hover. I mean it make the animation but glitched and still do not stop when it is not hovered :/. I will investigate your recommandation :)
    – crg
    Commented May 11, 2021 at 11:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.