Why the elapsedTime property of animation event is undefined

Question

I'm trying to access the elapsedTime property of animation events as shown in MDN.

When i inspect the object i can see the property with the corresponding value, However when i log it in console i'm getting undefined. Following is the sample code:

HTML

<div id='box'></div>

CSS

#box {
  position:absolute;
  top:0;
  left:0;
  width:50px;
  height:50px;
  background:red;
  animation: move 5s infinite;
}

@keyframes move {
  0% { left: 0; }
  50% { left:90%; }
  100% { left: 0;}
}

JS

$("#box").on("animationiteration webkitAnimationIteration", function (e) {
  console.log(e.elapsedTime); // this logs undefined
});

I've setup a fiddle here

Answer 1

The correct syntax is

console.log(e.originalEvent.elapsedTime);

In the javaScript event, the variable is elapsedtime, so you can access it as you did

javascriptevent.elapsedTime

However, you are setting the event function in jQuery. the jQuery event has a lot of the javascript variables mirrored, but not all.

To access the javascript variables not mirrored in the jQuery event, you have the originalEvent object, that is the original javascript event, inside the jQuery event.

So, the syntax is

jQueryEvent.originalEvent.elapsedTime

Use the same syntax to access all the variables not mirrored in the jQuery event

Answer 2

I fixed it by adding the line of code below in function onAnimationProgress(event) if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;