Anime.js - drag slider and update speed of rotation?

Question

I have a slider and a rotation animation.

So, something like this:

speed = 2000
var rotate1 = anime({
        targets: '#ferris',
          rotate: '1turn',
         loop:false,
         easing: 'linear',
        duration: speed,
    })

Everytime I update the value in the slider, I update speed and I want to somehow call the animation again, stopping the old one and starting the new one with the updated value of speed.

How can I do this? I tried messing with rotate1.pause, and rotate1.restart, but to no avail.

Thanks

Answer 1

By saying you are using a slide I understand that you are talking about an input with type of range, and basically all you need to do is add oninput event to your slider as follows:

<input type="range" min="500" max="5000" step="100" oninput="changeSpeed(this.value)">

In your JS code, you can then add something like the following:

var spin;

function changeSpeed(speed) {
    spin.pause();
    spin = anime({
        targets: '#ferris',
        rotate: '+=1turn',
        easing: 'linear',
        loop: true,
        duration: speed,
    });
}

References:

• onchange event on input type=range is not triggering in firefox while dragging
• https://github.com/juliangarnier/anime/issues/368

PS: This code isn't tested, please comment if you have a problem with it.