SVG code-animation rig

Source animation: svg-code-examples/qcobjects-code-animation.svg.

<!--
  QCObjects Code Animation Example */
  This code animates the file qcobjects-layout-basic-tag.svg
  The file can be generated by CodeMirror (https://codemirror.net/)
  Or Carbon Online Tool (https://carbon.now.sh)
-->
  <component name="qcobjects-code-animation" tplextension="svg"
            cached=true data-duration=320
            data-code_element="div.CodeMirror-code span"
            controllerClass="SVGCodeAnimationController" >
  </component>
  <script>
    Class('SVGCodeAnimationController',Controller,{
      dependencies:[],
      component:null,
      effectsConfig: {
        duration: 270,
        interval: 270
      },
      timeloop:null,
      animateElements () {
        var controller = this;
        controller.elements.sort().map((e,index)=>{e.style.opacity = 0;
          e.style.transform= "scaleX(0)"; return e;})
        .map((e,index)=>setTimeout(function() {
            New(Fade, controller.effectsConfig).apply(e, 0, 1);
            New(WipeRight, controller.effectsConfig).apply(e, 0, 1)
        }, index * controller.effectsConfig.interval))
      done () {
        if (controller.component.data.hasOwnProperty.call(controller.component.data,"duration")){
          controller.effectsConfig.duration = controller.component.data.duration;
          controller.effectsConfig.interval = controller.component.data.duration;
        }
        controller.elements = controller.component.body
                  .subelements(controller.component.data.code_element);
        controller.animateElements();
        controller.timeloop = setInterval(function () {
          controller.animateElements()
        }, controller.effectsConfig.interval*controller.elements.length);
      }
    })
  </script>