title: What is the best method of starting/ stoping js anime timeline on input
body: <p>I'm attempting to create an animation (using anime.js) that plays an animation timeline once when the users starts typing and will loop for the duration that the user is typing in the input box. When the user stops typing the animation will complete its current loop and stop playing.</p>
  
  <p>Here's my progress at the moment, you can observe the animation working incorrectly: <a href="https://codepen.io/andrewbentley/full/XqMrze" rel="nofollow noreferrer">https://codepen.io/andrewbentley/full/XqMrze</a> </p>
  
  <p>Here's what my anime.js code timeline:</p>
  
  <pre><code>var basicTimeline = anime.timeline({
    loop: true,
    autoplay: false,
    duration: 700
  });
  
  basicTimeline
    .add({
      targets: '#circ1',
      duration: 100,
      translateY: -10,
      easing: 'easeInQuad' 
    })
    .add({
      targets: '#circ1',
      duration: 100,
      translateY: 0,
      easing: 'easeInQuad'
    })
    .add({
      targets: '#circ2',
      duration: 100,
      translateY: -10,
      easing: 'easeInQuad'
    })
    .add({
      targets: '#circ2',
      duration: 100,
      translateY: 0,
      easing: 'easeInQuad'
    })
    .add({
      targets: '#circ3',
      duration: 100,
      translateY: -10,
      easing: 'easeInQuad'
    })
    .add({
      targets: '#circ3',
      duration: 100,
      translateY: 0,
      easing: 'easeInQuad'
     })
    .add({
      targets: '#circ3',
      delay: 100
  });
  
  document.querySelector('#email').onkeypress = basicTimeline.play;
  document.querySelector('#email').onkeyup = basicTimeline.pause;
  </code></pre>
  
  <p>Is anyone able to advise me as to the best way of achieving the desired effect whilst using anime.js timeline utility and the use of event listeners such as <code>onkeypress</code>, <code>onkeyup</code> etc.</p>