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);

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);

• javascript
• velocity.js

Share Improve this question Follow edited Dec 22, 2014 at 3:18 G.Mart 59744 silver badges1818 bronze badges asked Dec 20, 2014 at 15:43 BernieBernie 5,06555 gold badges4343 silver badges7373 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

I know, it is a bit late response to the question. Velocity.js adds Pause / Resume (per element or global) feature to it since 1.4 version.

You can use the feature like this;

$element.velocity('pause');

or 

$element.velocity('resume');

I hope it helps.

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/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./watch?v=bKEW02J3usA

It can be easily done with a setInterval() method.

var box = $('.box');
setInterval(function() {
    box.velocity({translateY: '-100%'}, 5000);
    box.velocity('reverse', {duration: 1});
}, 5000);

If what you mean is a pause()/resume() features, then no, it's currently not implemented in Velocity.

You'll have to manually restart your animation and you can use force-feeding to restart it from where you last stopped it.

As ydaniv mentioned, there is no pause / resume functionality.

However, you might have some success looking into Tweene as it extendeds Velocity.js and it's functionality.

To quote the Tweene docs "With Tweene you have now play(), pause(), resume(), reverse() and restart() methods for all supported libraries, for both tweens and timelines."