[SOLVED] Why is my JS animation not being detected as starting by my 'animationstart' event listener?

Why is my JS animation not being detected as starting by my 'animationstart' event listener?

I have an animation that I am declaring and playing using JS, but when the animation plays, my event listener doesn't fire.

Here's the HTML file:

let anim = document.getElementById("anim");

const animkeyFrames = new KeyframeEffect(
  anim,
  [{
      transform: `translate3d(0px, 0px, 0px)`
    }, // keyframe
    {
      transform: `translate3d(0px, ${200}px, 0px)`
    },
  ], {
    // keyframe options
    duration: 1000,
    iterations: "1",
  },
);
let animation = new Animation(animkeyFrames, document.timeline);

anim.addEventListener('animationstart', () => {
  console.log("STARTED");
})

animation.play();

#anim {
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: black;
  position: absolute;
}

<div id="anim"></div>

I want "STARTED" to be logged when the animation plays but nothing happens.

Solution

There is no animationstart event for Animation.

You can do something like this

animation.finished.then(() => console.log("Animation finished"));
animation.play();
console.log(animation.playState);

and during the animation use a loop or an async loop or some other means to get various properties of the Animation instance https://drafts.csswg.org/web-animations/#the-animation-interface.