I have 2 svg animations on the same page. They are each supposed to play on hover, and when the mouse leaves, they are to finish their infinite loop and stop. This works fine, unless I move from one directly to the other. The one I moved from continues to play until I move away from the second one. How can I make the first one stop when my mouse is on the second one? Below was my attempt.

Here is a link to my codepen: https://codepen.io/ericsayag/pen/GROJVdp

//OPTICS

var optics = document.getElementById("optics");
var running = false;

optics.addEventListener("mouseenter", function(opticsrun) {
  opticsrun.target.classList.add("run");
  running = true;
});
optics.addEventListener("mouseenter", function(opticsrun) {
  opticsrun.relatedtarget.classList.add("run");
  running = false;
});

optics.addEventListener("mouseleave", function(opticsrun) {
  running = false;
});


optics.addEventListener("animationiteration", function(opticsrun) {
  if (!running) {
    opticsrun.target.ownerSVGElement.classList.remove("run");
  }
});


//IMAGING

var imaging = document.getElementById("imaging");
var running = false;

imaging.addEventListener("mouseenter", function(evt) {
  evt.target.classList.add("run");
  running = true;
});

imaging.addEventListener("mouseleave", function(evt) {
  running = false;
});

imaging.addEventListener("animationiteration", function(evt) {
  if (!running) {
    evt.target.ownerSVGElement.classList.remove("run");
  }
});

Thank you.

CodePudding user response：

Just call remove on mouseleave.

I've removed some of the javascript that seemed non-functional and refactored it to remove the duplication.

//OPTICS

[document.getElementById("optics"), document.getElementById("imaging")].forEach(element => {
  element.addEventListener("mouseenter", function(e) {
    e.target.classList.add("run");
  })
  element.addEventListener("mouseleave", function(e) {
    e.target.classList.remove("run");
  })
});

.graycircle{
  fill:#000;
}

/*FIRST SVG: OPTICS*/
.optic{
  fill:#fff;
  stroke: #dadada;
  
}

.run .optic {
 animation-name: opticgradient;
  animation-duration: 1.7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.frame{
  fill:#dadada;
}

.run .frame {
 animation-name: framegradient;
  animation-duration: 1.7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes opticgradient {
  0% {fill: rgba(255, 255, 255, 1);}
  25% {fill: rgba(255, 205, 0, 1);}
  50% {fill: rgba(255, 205, 0, 0.5);}
  75% {fill: rgba(255, 255, 255, 0.5);}
  100% {fill: rgba(255, 255, 255, 1);}
}

@keyframes framegradient {
  0% {fill: rgba(218,   218,    218, 1);}
  25% {fill: rgba(255, 205, 0, 1);}
  50% {fill: rgba(255, 205, 0, 1);}
  100% {fill: rgba(218, 218,    218, 1);}
}


/*SECOND SVG: IMAGING*/

.camera {
  fill: #dadada; 
}

.picture {
  fill: #dadada; 
  transform: matrix(1, 0, 0, 1, 0, 0)
}

.run .picture {
    animation-name: pictureexpand;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;*/
}

.run .camera {
    animation-name: cameracolor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /*animation-play-state: running;*/
}


@keyframes pictureexpand {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    fill: rgba(218, 218,    218, 1);
  } 
  1% {
    transform: matrix(1, 0, 0, .1, 0, 75);
  }
  25% {
    fill: rgba(255, 205, 0, 1);
  }
  30% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  50% {
      fill: rgba(255, 205, 0, 1);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
    fill: rgba(218, 218,    218, 1);
  }
}

@keyframes cameracolor {
  0% {
    fill: rgba(218, 218,    218, 1);
  }
  25% {
    fill: rgba(255, 205, 0, 1);
  }
  50% {
    fill: rgba(255, 205, 0, 1);
  }
  100% {
    fill: rgba(218, 218,    218, 1);
  }
}

<!--FIRST SVG: OPTICS-->
<svg width="100" height="100" viewBox="0 0 103.8 103.8"  id="optics">
  
  <circle  cx="51.9" cy="51.9" r="51.9"/>
  
  <path  d="M58.88,38.44A102.11,102.11,0,0,0,50.5,14.17h-9S27.89,27.52,27.89,51.9,41.51,89.63,41.51,89.63h9a102.11,102.11,0,0,0,8.38-24.27A66,66,0,0,0,58.88,38.44Z"/>
  
  <path  d="M63.32,14.17H51.59A100.75,100.75,0,0,1,61,44.77,54.9,54.9,0,0,1,61,59a100.75,100.75,0,0,1-9.43,30.6H63.32A66.21,66.21,0,0,0,75.91,51.9,66.21,66.21,0,0,0,63.32,14.17Z"/></svg>


<!--SECOND SVG: IMAGING-->
<svg  width="100" height="100" viewBox="0 0 103.8 103.8" id="imaging">
      
<circle  cx="51.9" cy="51.9" r="51.9"/>
  
  <path  d="M63.63,18.27c-1.92-.63-8.88-2.71-11-3.35a2.29,2.29,0,0,0-1.27,0c-2.16.63-9.25,2.71-11.17,3.35-2.45.82-2.09,2-2.09,2V44.61c0,2.82,2.09,2.36,2.09,2.36l11.16-4.12a1.71,1.71,0,0,1,1.14,0L63.63,47s2.09.46,2.09-2.36V20.27S66.08,19.09,63.63,18.27Z"/>
  
  <path  d="M51.65,43.57l-8.73,3.19V69.42a1,1,0,0,0,1,1H60.14a1,1,0,0,0,1-1V46.86l-9-3.29A.72.72,0,0,0,51.65,43.57Z"/>
  
  <polygon  points="45.3 71.65 58.45 71.65 52.05 88.97 45.3 71.65"/></g></g></svg>