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 — Heretic Monkey
– Heretic Monkey, Commented Jun 8, 2018 at 16:03

WNP · Accepted Answer · 2018-06-08 15:14:20Z

0

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.

answered Jun 8, 2018 at 15:14

WNP

1612 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Detecting javascript animation end

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related