Unable to animate Font Awesome Icon using Vivus

Question

I'm trying to get a font awesome icon to be drawn onDocumentReady, however I'm having some issues with it.

The library that came to my mind is Vivus . There's a library for connecting Font Awesome and Vivus aswell: FontAnimate .

I thought easy game, but I can't seem to fill the icons I'm drawing. Example here: https://jsfiddle.net/m1og17yz/

The fill is happening before the animation ends and the fill isn't animated at all. There's a similar Github Issue here, so I tried that since it got solved.

But that still doesn't seem to be working as I'm getting this https://jsfiddle.net/m1og17yz/2/ as you can see there is a delay between ending of the drawing and the filling.

callback: function (obj) {
     obj.el.classList.add('finished');
}

Answer 1

The commit that added the callback was not released on NPM. So we both ended up installing an old version of the library that does not contain the code that passes the callback.

Try npm install innovato/fontanimate#master --save .