jQuery / CSS Animation - Pause in FF and Chrome jumps back and start is not correct

Question

In IE and Safari the pausing and resuming of the progress bar that moves around works lovely however in firefox and chrome when you hit pause it does not pause at the correct time but seems to jump back and then stops and also when you initially start the animation it does not start from the top but a little ahead of itself.

Really keen to get this fixed so its done but cannot work it out, would be great if someone could help me on a solution.

In order to start it click on the big PINK circle

FIDDLE: http://jsfiddle.net/uj4e5cw0/5/ - you will see what i mean when you start to play with it.

JS:

var playing = false;

    $(document).ready(function () {

        var animation = new TimelineMax();
        var svgPaths = $("#ring");

        for (var x = 0; x < svgPaths.length; x++) {
            var path = svgPaths[x];
            var pathDimensions = path.getTotalLength();
            var strokeWidth = path.getAttribute("stroke-width");
            path.style.strokeDasharray = (pathDimensions) + " " + (pathDimensions);
            path.style.strokeDashoffset = (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
            //path.style.strokeDashoffset = (/Firefox/i.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
            animation.add(TweenMax.to(path.style, 20, {
                strokeDashoffset: 0, onUpdate: function () {
                    var n = document.createTextNode(' ');
                    document.body.appendChild(n);
                    document.body.removeChild(n);
                }
            }), (x > 0) ? "-=0.8" : "");
        }

        $(document).on('click','#pause', function(e) {
            $(svgPaths).attr("class", "paused");
            animation.pause();
        });

        $(document).on('click', '#resume', function (e) {
            $(svgPaths).attr("class", "active");
            animation.resume();
        });

        $(document).on('click', '#restart', function (e) {
            //$(svgPaths).attr("class", "");
            //$(svgPaths).attr("class", "active");
            animation.restart();
        });

        $(document).on('click', '#loader', function (e) {

            if (!playing) {
                $("svg path").attr("class", "active");
                /* $("#circle").attr("class", "active"); */
                $("svg path#back").attr("stroke", "#034870");
                $("svg path#back").attr("fill", "#FFFFFF");
                $("svg path#ring").attr("stroke", "#FF1251");

                animation.resume();
                playing = true;
            } else {
                $("svg path").attr("class", "");
                /* $("#circle").attr("class", ""); */
                animation.pause();
                playing = false;
            }

        });

    });

Answer 1

You should never mix JS+CSS animation. Remove the following CSS:

#ring.active {
    -webkit-animation: load 20s 1 forwards;
    -moz-animation: load 20s 1 forwards;
    -o-animation: load 20s 1 forwards;
    -ms-animation: load 20s 1 forwards;
    animation: load 20s 1 forwards;

    -ms-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

#ring.paused {
   -ms-animation-play-state: paused;
   -o-animation-play-state: paused;
   -moz-animation-play-state: paused;
   -webkit-animation-play-state: paused;
   animation-play-state: paused;
}