Detecting javascript animation end

Question

I'm currently writing animations like so

function animate(element, angle, x, y){
var id = setInterval(frame, 5);

  function frame() {
      if (/* test for finished */) {
          clearInterval(id);
      } else {
          /* change element style */ 
      }
    }
}

I can't do addEventListener("animationend", function(e){...}) since it's not a css animation, so how would I do something similar to detect the end of the animation on a specific element and run a different function following it like the addEventListener("animationend", function(){}) would do? Specifically, I want to create a function that takes in those parameters.

Possible duplicate of [Executing code when a function is complete](https://stackoverflow.com/questions/18641626/executing-code-when-a-function-is-complete) — Heretic Monkey, Jun 08 '18 at 16:03

score 0 · Answer 1 · answered Jun 08 '18 at 15:14

The easiest way I thought of, not necessarily the best way, would be to provide a callback function.

function animate(element, angle, x, y, callbackFunction){
  (function(callback){
    var id = setInterval(frame, 5);
    function frame(){
      if (test for finished) {
        clearInterval(id);
        callback();
      } else { ... }
  })(callbackFunction);
}

I wrapped it with an anonymous function to make sure that frame would have a scope reference to it.

Another alternative, which may be more clean and the preferred way, would be to apply a class to the element on animation end and then listen in for that change.

Detecting javascript animation end

1 Answers1