1

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?

spliter
  • 12,321
  • 4
  • 33
  • 36

1 Answers1

0

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();
});
evanfuture
  • 1
  • 1
  • 1
  • Thanks for the answer, @evanfuture. But there are some issues here :) First, I am looking for something standard and simple instead of hard-core Math because I can workaround the issue by going through all animated elements and reset their animations (technically animate them back to start). But this smells bad. When it comes to `getAnimations()` it's way to broad sine it includes CSS animations and so on. Also when animations are done, `document.timeline.getAnimations()` returns empty Array. Would you mind updating the example with your solution? – spliter Sep 11 '17 at 09:33
  • Busy day today, but I'll give it a try. In the meantime, anyone else should feel free/obligated to chip in too. – evanfuture Sep 12 '17 at 07:17