Vexflow Animation SVG Javascript

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://unpkg.com/[email protected]/releases/vexflow-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<div id='sheet' style='max-width: 100%; width: 600px; margin: 0 auto;'></div>
<!-- controls -->
<div style='text-align: center;'>
  <input type='number' value='60' id='speed'/>
  <button id='stop'>stop</button>
  <button id='start'>start</button>
  <button id='add-note'>add note</button>
</div>

JavaScript

var Note = function(options){
  console.log(window);
  this.StaveNote = new Vex.Flow.StaveNote(options);
  this.removed = false;
  /**
   * moves the note right from its ORIGINAL position by x pixels
   * (sets the trasform: translate(x) value to x)
   */
  this.setOffsetX = (x) => {
    if(this.removed){
      return this;
    }
    $.each(this.getElem(true),(index, node) => {
      var x_y = this.getTransformXY(node);
      x_y.x = x;
      node.setAttribute('transform', `translate(${x_y.x},${x_y.y})`);
    })

    return this;
  }
  /**
   * removes the SVG elements
   */
  this.remove = () => {
    if(this.removed){
      return this;
    }
    var note = $(this.StaveNote.attrs.el);
    var bar = this.getBar();
    // remove line that go though the stave
    bar.remove();
    note.remove();
    console.log('remove');
    this.removed = true;
    return this;
  }


  /**
   * moves the note right from its CURRENT position by x pixels
   * (adjusts the trasform: translate(x) value by x)
   */
  this.moveXPixels = (x) => {
    if(this.removed){
      return this;
    }
    $.each(this.getElem(true),(index, node) => {
      var x_y = this.getTransformXY(node);
      x_y.x += x;
      node.setAttribute('transform', `translate(${x_y.x},${x_y.y})`);
    })

    return this;
  }


  /**
   * returns the <svg> 
   */
  this.getSvg = () => {
    return $(this.StaveNote.attrs.el).closest('svg');
  }
  /**
   * Gets the StaveNote.attrs.el as a jQuery object
   * @param {boolean} include_bar - whether to include the <rect> bar with it
   */
  this.getElem = (include_bar) => {
    var return_jquery = $(this.StaveNote.attrs.el);

    if(include_bar){
      var bar = this.getBar();
      if(bar.length){
        return_jquery = return_jquery.add(bar);
      }
    }

    return return_jquery;
  }
  /**
   * returns the <rect> before the StaveNote.attrs.el
   * if it exists
   */
  this.getBar = () => {
    return $(this.StaveNote.attrs.el).prev('rect');
  }

  /**
   * gets...