There are often times where I want to reset a sequence of chained animations I have made using WAAPI.

Here is a reduction:

See the Pen How to reset chained animations? by Ben Frain (@benfrain) on CodePen.

I’m using WAAPI to run a series of animations. My reduction moves the box to the right, waits three seconds, then moves the circle to the right.

What I would like to do, is ‘reset’ that chained animation at any point after the first has started playing. Both elements should return to their starting position and start the sequence again.

But that, just that, can seem very hard to accomplish.

Demonstrating the problem

The problem is most obviously seen if waiting for the circle to start moving and then click “Play/Restart”. When you do that, although the function is fired, nothing happens. If you wait for the sequence to end, and then click, it runs again but the circle does not go back to its starting position until the square gets to end, which makes sense as we are filling in both directions, so that circle is doing as it has been told! We just animated it to the right, and that was the last thing we told it.

Make a sequence to reverse the animations?

The next place my mind went to to solve this, was creating a ‘reset’ sequence, that ‘animates’ the relevant elements back to their starting position over 0 time. And then run the original animations again. But that was just one part of the solution. I found it was necessary to deal with cancelling any animations that has already started. So, to solve I had a reverseAnimations() function that included this at the top:

const animatingElements = document.getAnimations({
  subtree: true,
});
if (animatingElements.length > 0) {
  animatingElements.map((item) => {
    item.cancel();
  });
}

So, where are we up to at this point? In order to reset our sequence I was thinking I needed to cancel any running animations, and then run a bunch of animations to reset the elements, before running the main animations again. For these two elements alone, the code needed now looks like this:

const CIRCLE_REVERSE = CIRCLE.animate(
  {
    transform: "translateX(150px)",
  },
  {
    duration: 0,
    fill: "both",
    direction: "reverse",
  }
);
CIRCLE_REVERSE.pause();

const BOX_REVERSE = BOX.animate(
  {
    transform: "translateX(500px)",
  },
  {
    duration: 0,
    fill: "both",
    direction: "reverse",
  }
);
BOX_REVERSE.pause();

function reverseAnimations() {
  // First cancel anything animating
  const animatingElements = document.getAnimations({
    subtree: true,
  });
  if (animatingElements.length > 0) {
    animatingElements.map((item) => {
      item.cancel();
    });
  }
  // Now reverse the effect with dedicated methods
  CIRCLE_REVERSE.play();
  BOX_REVERSE.play();
}

This works, you can try it using the ‘Reverse and Play’ button. But seems like a lot of effort, no? Well, turns out the ‘secret sauce’ to solving this more economically is already there, but before we get to that, another method I considered was reverse().

What about reverse()?

You can also try reverse(). In this instance, I am first updating the playback rate of the animation to make it seem instant with updatePlaybackRate(1000) and then using reverse() to play the animation back to the beginning, and then using a finished.then() promise to reset the playback rate to ‘normal’ with updatePlaybackRate(1). This works well enough if the sequence finishes first, but if not, it reverses the direction any running animation the opposite way (clues in the title ;)). Try playing the animation and then clicking ‘Reverse’ in the example when the square starts to move and the square will go back to the beginning (good) but the circle will jump to the end (bad).

So, what’s the simplest way to do this?

Our little snippet above, to kill off any existing animations is so effective, we don’t need to use something to reverse the effects, as at this point they no longer exist. Instead, we can now just re-run our original animation. When you click the ‘Cancel’ button in the reduction, this is what happens:

CANCEL.addEventListener("click", () => {
  const animatingElements = document.getAnimations({
    subtree: true,
  });
  if (animatingElements.length > 0) {
    animatingElements.map((item) => {
      item.finish();
      item.cancel();
    });
  }
  runAnimations();
});

You can click Cancel at any point in the sequence and it will behave as expected. It first finds any animations, cancels their effects (I am running getAnimations on the document but you can narrow its scope), and then runs our animations by calling our function that runs our original sequence.