SetTimeout on vanilla JS on []forEach.call not working in sequences

Question

I am trying to animate all LI in a sequence, but the code is animating all LI at once.

I could not find a useful reply anywhere, I know how to do this in Jquery, but something does not add up here.

I have tried to add the Timeout to the eventhandler and the called function, both approaches do not work.

This is the function

function changeLi() {
  setTimeout(function() {
    [].forEach.call(li, function(li) {
      li.style.transform = "translateX(200px)";
    }, 900);
  });
}

Link to codepen:

http://codepen.io/damianocel/pen/PzYXmv

I have tried to add stopPropagation/preventDefault to the call, but that did not help either.

Answer 1

There are several issues with your code. First, the 900 is not a parameter of your setTimeout , but rather of the forEach.call . That appears to be just an error.

Secondly, even if the above is fixed, your code would simple set a single timeout for 900ms in the future to then iterate over all of your li 's in the list and transform them at once . What I believe you really want to do is loop over all your items and define a timeout to run in the future where each is run a certain amount of time from the previous. Since forEach provides an index, you can use a static ms count and multiple it by the current index of you li list to animate further out from right now .

I believe you are actually looking for something like this, which loops over your li list, and sets a transform to occur on each item 100ms from the previous:

function changeLi() {
  [].forEach.call(li, function(li, i) {
    setTimeout(function() {
      li.style.transform = "translateX(200px)";
    }, 100 * i);
  });
}