How to (re)start an animation on mouseenter

Hi,

I would like to have an animation play once, each time the mouse enters an area.

2750 milliseconds is where the animation begins, and 4250 is where it ends.

Once the animation begins playing, I want mouseenter events to be ignored, until the animation has finished.

The code below is not working properly, it only plays the animation the first time mouseenter is run.

What am I doing wrong?

Thanks

   //Edge symbol: 'stage'
   (function(symbolName) {
     
      var spinning = false;

      Symbol.bindElementAction(compId, symbolName, "${_interaction}", "mouseenter", function(sym, e) {
         if (!spinning){
          sym.play(2750);
          spinning = true;
         }

      });
      //Edge binding end

      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 4250, function(sym, e) {
         spinning = false;

      });
      //Edge binding end

   })("stage");
   //Edge symbol end:'stage'