Web Animations API: reset animation on demand

Question

I have a complex animation as a combination of KeyframeEffect's grouped into GroupEffect and SequenceEffect. In a very simplified version it looks something like presented in this JSBin https://jsbin.com/denucaq/edit?html,js,output

The problem is that I have to reset all the changes done by animation at some point in order to, possibly, re-run the animation or do something else.

I can not use fill: 'none' since different elements animate with different durations and they all have to stay in it's final position until all the elements have been animated.

So the questions is what should I write in the body of the crazyWords.reset function?

Answer 1

It's going to require a bit of math, but you can get all the info you need from the methods themselves. Try putting this inside the reset function then clicking it at various times:

console.log(document.timeline);

You have access to a oncancel method, so you can use that to revert the changes based on the start time versus the current time, and so forth (maths happening here). I also just found a reverse method that works nicely:

const allAnimations = document.timeline.getAnimations();
allAnimations.forEach((ani) => {
  ani.pause();
  console.log(ani.playState);
  ani.reverse();
});