Bernhard Bernhard - 1 year ago 98
Javascript Question

Restart a velocity.js animation loop after stopping

I'm trying to find out if there's a way to restart a velocity animation after it has been stopped.

Is there a velocity only way without applying a new animation with same properties again?

var box = $('.box');
box.velocity({rotateZ:'360deg'}, {duration:1000, loop:true});

// That's a dummy to explain what I'm trying to do
setTimeout(function{
box.velocity('stop');

setTimeout(function(){
box.velocity('START ORIGIN ANIMATION AGAIN');
});
}, 2000);

Answer Source

Of course it's possible!

function Start() {

    var box = $('.box');

    DoRotation();

    $('#GoBtn').click(function() {

        box.velocity('stop').velocity({rotateZ:'0deg'}, {duration:1});

        setTimeout(DoRotation, 1000);

    });

    function DoRotation() {

         box.velocity({rotateZ:'360deg'}, {duration:1000, loop:true});
    }
}

$(Start);

And here's a jsFiddle to show it in action: http://jsfiddle.net/uy6578an/

I use something like this where I start and restart an amination and it works no problem, take a look at here to see it running on the timer: https://www.youtube.com/watch?v=bKEW02J3usA

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download