Change a canvas js variable by animating it

Original canvas created by Jack Rugile.

I am trying to change several variables in the canvas js file on hover using a jquery function. Several work but I would like to change the radius of the glowing rotation by animating it rather than having it instantly change. Similar to the way this expands.

I tried using a $timeout but i don't think that is the proper way to go. Any suggestions?

DEMO

The jquery hover is at the bottom of the js.

$('.containAnimation').hover(function() {
  circle.speed = 8;
  circle.thickness = 20;
  particleMax = 200;
  $timeout(function() {
    circle.radius = 150;
  }, 3000);
}, function() {
  circle.speed = 1.5;
  circle.thickness = 15;
  particleMax = 100;
  $timeout(function() {
    circle.radius = 100;
  }, 3000);
});

Answers 1

  • Try this. Use requestAnimationFrame to animate by recursively calling the function.

    $('.containAnimation').hover(function() {
      circle.speed = 8;
      circle.thickness = 20;
      particleMax = 200;
      setTimeout(animateHoverIn, 10);
    }, function() {
      circle.speed = 1.5;
      circle.thickness = 15;
      particleMax = 100;
      setTimeout(animateHoverOut, 10);
    });
    
    function animateHoverIn(){
        if (circle.radius>=150){
           return;
        }
        circle.radius++;
        requestAnimationFrame(animateHoverIn);
    }
    
    function animateHoverOut(){
        if (circle.radius<=100){
           return;
        }
        circle.radius--;
        requestAnimationFrame(animateHoverOut);
    }
    

Related Articles