CODEWITHSUNDEEP
javascriptvelocity.js
Bernie
Bernie

Reputation: 5055

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

Upvotes: 2

Views: 4084

Answers (5)

forethought
forethought

Reputation: 3253

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.

Upvotes: 2

Csaba
Csaba

Reputation: 2086

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

Upvotes: 1

frenchie
frenchie

Reputation: 51937

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

Upvotes: 1

G.Mart
G.Mart

Reputation: 597

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."

Upvotes: 0

ydaniv
ydaniv

Reputation: 1289

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.

Upvotes: 0

Related Questions