CSS SVGator animations and multiple classes

Question

The premise: There are 8 tabs (with JS) to toggle the associated content wrappers via display:none --> display:block. Those content wrappers have animated SVGs inside them and they cause issues. Essentially, if the tab is active, the associated content wrapper should display and the SVG animation should play. Once another tab is activated, the previous content wrapper and the SVG animation should reset.

I've created some animations in SVGator, yet failed to put them to work due to a few reasons:

1. Having 8 tabs, each containing only one of the 8 SVGs means only the active tab should animate. This is obviously not the case and they would all animate even if invisible.
2. So I thought using the 'scroll into view' would fix it, coupled with switching of the tabs. However, since the tabs turn the SVG respective wrappers from display:none to display:block, the animations fail to play at all. (I've tried to research the keyframes and diplay:block properties for that matter...)
3. So I thought I'd turn to CSS only animation, compile all keyframes into a .css file and would toggle the class to activate the respective keyframes.

Currently, I think that using the 3. approach is the only viable solution here. Yet, my JS is not strong and seemingly failed me somewhere =( Could someone please help me fix it? Bonus query: any other suggestions how this could be all put together to work?

<div class="taps">
     <button class="taplinks" onclick="openTap(event, 'One', SVG-1)" id="defaultOpen">Button 1</button>
     <button class="taplinks" onclick="openTap(event, 'Two', SVG-2)">Button 2</button>
     <button class="taplinks" onclick="openTap(event, 'Three', SVG-3)">Button 3</button>
   </div> 

   <div id="One" class="tapcontent">
      <svg id="SVG-1" . . .rest of the generated code (without CSS keyframes). . . </svg>
   </div> 
   <div id="Two" class="tapcontent">
      <svg id="SVG-2" . . .rest of the generated code (without CSS keyframes). . . </svg>
   </div> 
   <div id="Three" class="tapcontent">
      <svg id="SVG-3" . . .rest of the generated code (without CSS keyframes). . . </svg>
   </div> 


JavaScript: 

function openTap(evt, TapName, svgName) {
  var i, tapcontent, taplinks;
  tapcontent = document.getElementsByClassName("tapcontent");
  for (i = 0; i < tapcontent.length; i++) {
    tapcontent[i].style.display = "none";
  }
  taplinks = document.getElementsByClassName("taplinks");
  for (i = 0; i < taplinks.length; i++) {
    taplinks[i].className = taplinks[i].className.replace(" active", "");
  }
  document.getElementById(TapName).style.display = "block";
  evt.currentTarget.className += " active";
  var element = document.getElementById(TapName);
  element.classList.add("reveal");
}
document.getElementById(svgName).style.display = "block";
  evt.currentTarget.className += " active";
  var element = document.getElementById(svgName);
  element.classList.add("animate");
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

I've used this JS successfully without SVGs (used to be just images), so switching the tabs works, yet for some reason by adding the same logic to SVG element.classList.add(animate); doesn't seem to work. NB: I've renamed some of the parameters, as I tend to use weird to the outsiders logic and naming xD

Answer 1

There is now a way to control the animation programmatically. Export your SVGs using "Animation start: Programmatic" and start the animation when needed.

I you want to use JS, you could easily detach the element from the DOM tree and attach it when the content wrapper becomes visible. That resets the CSS animation.