What does the animation duration in frames mean?

Question

I have been using vivus.js for tiny svg animations for a while now , now this plugin has the following initialization format:

new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'}, myCallback);

dead simple to use , now my question is about the duration: 200 parameter. see the documentation for it HERE. Now whenever i use jquery and other librarys etc 1000 means 1 secound , but here what is 200 is not very clear , the documentation says the followning:

duration :: Animation duration, in frames. [Default: 200].

Now what exactly is animation duration in frames supposed to mean ? what is 200 really here 2000 ?

Answer 1

Under the hood vivus is using requestAnimationFrame so it deals in frames instead of milliseconds.

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

https://github.com/maxwellito/vivus/issues/72

From the above link You can keep in mind an average score of 30 frames per second and adapt your instance with it.

The code located at the mozilla link does work, it just doesn't show anything visual (at least in jfiddle).

Here's a working example that shows movement.

http://jsfiddle.net/4ej3Legg/

HTML

<div id="anim">
  <span id="blah">asdasf</span>
</div>

Javascript

var start = null;
var element = document.getElementById("blah");

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.position = "absolute";
  element.style.left = Math.min(progress / 10, 500) + "px";
  if (progress < 100000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);