I am using anime.js to animate an element that is being bounced back in forth from the edges of its container. I want to be able to adjust the speed of this animation using a range slider that I have elsewhere on the page.

My problem is that while the duration is adjusted, it appears that the slider instantiates pletely and does not continue animating to where it originally was suppposed to. I want it to go from the far left to the far right, but when I resize it the animation will only go from the place where it was resized to the end of the container.

These have been my attempts when calling the onchange method of my slider.

    function adjustSpeed() {
    alternate.duration = 300;  
    } 

and

function adjustSpeed() {
var alternate = anime({
    targets: '#alternate .el',
    translateX: width,
    direction: 'alternate',
    loop: true,
    duration: 300,
    easing: 'linear',
});

}

Any help would be very much appreciated.

I am using anime.js to animate an element that is being bounced back in forth from the edges of its container. I want to be able to adjust the speed of this animation using a range slider that I have elsewhere on the page.

My problem is that while the duration is adjusted, it appears that the slider instantiates pletely and does not continue animating to where it originally was suppposed to. I want it to go from the far left to the far right, but when I resize it the animation will only go from the place where it was resized to the end of the container.

These have been my attempts when calling the onchange method of my slider.

    function adjustSpeed() {
    alternate.duration = 300;  
    } 

and

function adjustSpeed() {
var alternate = anime({
    targets: '#alternate .el',
    translateX: width,
    direction: 'alternate',
    loop: true,
    duration: 300,
    easing: 'linear',
});

}

Any help would be very much appreciated.

• javascript
• animation
• slider
• anime.js

3 Answers 3

I just came across this issue and I've found a better yet not perfect solution. AnimeJS has another static speed property that is by default set to 1. If you change this speed, the animation speed changes, though the animation "jumps" and it doesn't look smooth.

For example, if you want the speed to be 0.5x the original speed, set anime.speed = 0.5.

I'll update this answer if I e up with a better solution.

A dirty solution:

Manage frame manually by anime.tick bining with requestAnimationFrame, here're the demo:

https://codesandbox.io/s/anime-js-speed-adjustment-lm0ui?file=/src/index.js

The code is basically self-explained, if you have any further question, let me know.

When you changed speed or duration, you have to stop and remove current animation. After that, you have to start new animation with new duration value.

Here is example of bouncing from left to right element.

    var duration = 500
    const animateBLS = () => {
     const el = document.getElementById('dot')
     anime.remove(el)
     animation = anime({
     targets: [el],
     left: '100%',
     direction: 'alternate',
     loop: true,
     easing: 'linear',
     duration: duration
    });
   }

And there is the code for running new animations, called when durations is changed. It's finish current animation with new speed value, and start our main animation functions "animateBLS"

  const el = document.getElementById('dot')
  if(animation.reversed) {
    anime.remove(el)
    animation = anime({
      targets: [el],
      left: '0%',
      direction: 'normal',
      loop: false,
      easing: 'linear',
      duration: duration,
      plete: () => {
        animateBLS()
      }
    });
  } else {
    anime.remove(el)
    animation = anime({
      targets: [el],
      left: '100%',
      direction: 'normal',
      loop: false,
      easing: 'linear',
      duration: duration,
      plete: () => {
        animation = anime({
          targets: [el],
          left: '0%',
          direction: 'normal',
          loop: false,
          easing: 'linear',
          duration: duration,
          plete: () => {
            animateBLS()
          }
        });
      }
    });
  }