Mithun Raikar Mithun Raikar - 1 month ago 10
jQuery Question

How to start another animation on end of one animation in velocityjs

i am trying to animate the image using velocityjs. here i am trying to get the sparkling effect for one of the image.the image first scales up and then it turns opacity to zero.

Here i am calling the

anim1
first and then after the
anim1
i want to call
anim2
how can i do that?

var anim1 = function(){
$(".sparkle1").velocity({
opacity: 1,
scale: [1,0],
}, 300);
}

var anim2 = function(){
$(".sparkle1").velocity({
opacity: 0,
}, 200);
}

Answer

Could you please try to use complete callback as follows:

var anim1 = function(){
    $(".sparkle1").velocity({ 
          opacity: 1,
          scale: [1,0],
        }, {
        duration:300,
        complete: function() {
            anim2(); //calling the second animation on completion of first
        }
    });
 }  

var anim2 = function(){
    $(".sparkle1").velocity({ 
      opacity: 0,
    }, 200);
}