How to animate something during scroll/mouse (continuous) event?

[stenvdb]

I currently have a scroll handler in which I want to animate the translateY value of an element. When I add a delay of lets say 200ms, the animation starts on the last scroll event fired, yet nothing happens during scroll. I assume because I'm restarting the same anime() function over and over again and nothings changes because of the delay.

However, in other libraries such as gsap, the same code works fine. I guess the animation there gets queued/stacked whereas in anime.js it starts a new one on each call.

So how do I tackle this so that a delayed animation runs smoothly in an event handler that gets called continuously (scroll, mousemove, ...)?

[stenvdb]

I resolved it by just wrapping anime with a simple setTimeout function and leave the delay of anime to 0.

[juliangarnier]

You can also set the autoplay parameter to false, and play or restart the animation at some point during the scroll event.

Something like this :

var scrollAnimation = anime({
  targets: '.my-el',
  translateY: 100,
  delay: 200,
  autoplay: false
});

And in you scroll function :

scrollAnimation.play();

http://anime-js.com/documentation/#playPause