CODEWITHSUNDEEP
javascripthtmlcssvelocity.js
Lenar Fattahov
Lenar Fattahov

Reputation: 141

Why velocity animation works only one time?

I'm animating using velocity.js, and want to return block when animation completed. So I assign el[0].style.transform = "translateX(0px)" and call function again, but animation doesn't work anymore.

http://jsfiddle.net/nbLLzqn0/2/

var box = $('.box');

function anim() {
    box.velocity({
        translateX: 200
    }, 
    {
        duration: 3000,
        complete: function (el) {
            $('.info').html(el[0].style.transform);
            el[0].style.transform = "translateX(0px)";
            anim();
        }
    });
}

anim();

What am I doing wrong?

Upvotes: 2

Views: 287

Answers (3)

Rycochet
Rycochet

Reputation: 2938

Use forcefeeding - 

box.velocity({
    translateX: [200, 0]
}

Upvotes: 0

silentw
silentw

Reputation: 4885

Change the line

el[0].style.transform = "translateX(0px)";

To

box.velocity({ translateX: 0 },{ duration: 0 });

Upvotes: 1

dbd
dbd

Reputation: 159

If you want it to bounce from right to the left, it's called looping. Try adding loop:true like this:

   duration: 3000,
   loop: true,
   complete: function (el) {

Upvotes: 0

Related Questions