title: JS rotate animation change speed
body: <p>I try to make a rotationg block, which rotation speed is controlled by <code>&lt;input type="range"</code>. The problem is that I can't find solution that <strong>doesn't restart animation</strong> when speed updates.</p>
  
  <p>I tried three variants: </p>
  
  <ul>
  <li><p>Directly set CSS animation speed by JS. — restarts animation;</p></li>
  <li><p>jQuery's <code>animate</code> — doesn't work with transforms;</p></li>
  <li><p>Library <code>anime.js</code> — it has method for speed changing but it also
  restarts animation (or just makes block jump, it's unclear) </p></li>
  </ul>
  
  <p>What method allows to create smoothly changing by JS animation?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let block = anime({
     targets: '#transforms .block',
     rotateY: '360',
     easing: 'linear',
     loop: true,
     duration: 1000,
  });
  
  
  var el = document.querySelectorAll('#range')[0];
  
  el.addEventListener('change', function() {  
    // console.log(value);
    // console.log(pos);
    var value = this.value;
    anime.speed = value/20;
    // console.log(block);
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.block {
    width: 500px;
    height: 300px;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"&gt;&lt;/script&gt;
  &lt;div id="transforms"&gt;
    &lt;div class="block"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;input id="range" type="range" min="0" max="20" step="1" value="10"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>anime.js example code <a href="https://codepen.io/mankutila/pen/YLqQYv" rel="nofollow noreferrer">On Codepen</a></p>