javascript - Web Animations API: reset animation on demand -

i have complex animation combination of keyframeeffect's grouped groupeffect , sequenceeffect. in simplified version looks presented in jsbin https://jsbin.com/denucaq/edit?html,js,output

the problem have reset changes done animation @ point in order to, possibly, re-run animation or else.

i can not use fill: 'none' since different elements animate different durations , have stay in it's final position until elements have been animated.

so questions should write in body of crazywords.reset function?

it's going require bit of math, can info need methods themselves. try putting inside reset function clicking @ various times:

console.log(document.timeline); 

you have access oncancel method, can use revert changes based on start time versus current time, , forth (maths happening here). found reverse method works nicely:

const allanimations = document.timeline.getanimations(); allanimations.foreach((ani) => {   ani.pause();   console.log(ani.playstate);   ani.reverse(); });