Velocity.js: How to stop the queue but force the element to go to the final state?

In theory, starting an animation queue with a total duration of 0 should immediately play all effects. It doesn't work, but it takes 1ms.

ydaniv indicated that API Velocity has a property mock

that, among other things, allows the behavior duration: 0

: mock: true

. Velocity.js API for layout .

I added three lines to your code (2 in the stop function, 1 in the beginning) that are used mock

to achieve 0ms duration:

$('.stop').click(function (){
  // Stop and clear the animation queue.
  $(".animate").velocity('finish', true);
  // Enable mocking, and play out the animation instantly.
  $.Velocity.mock = true;
  $(".animate").velocity('callout.twirl');
})

// ...

function start(){
    // Reset the instant mocking, and start the animation properly.
    $.Velocity.mock = false;
    $(".animate").velocity('callout.twirl')
}

      

        
        
        
      

    

Demo: Codepen (using mock) .

Warning: An animated div can prevent the user from clicking the Stop button. Note that you still need to end the animation queue as before.

My original solution (1ms duration) is probably not as efficient, but doesn't require a reboot mock

. Using mock will also prevent you from testing your interface with it , so I included the original solution:

$('.stop').click(function (){
  // Stop and clear the animation queue.
  $(".animate").velocity('finish', true);
  // Play out the animation, effectively immediately.
  $(".animate").velocity('callout.twirl', { duration: 1 });
})

      

        
        
        
      

    

Demo: Codepen (1ms duration) .

I highly recommend that you try to keep the intended functions mock

by using either a more crude approach duration

, or by creating a construct that will manipulate the mutable variable for you based on your own semi-global setting (i.e. if you enabled mocking non-locally, temporarily change the values before and after your option finish

).