How to set up velocity.js?

Question

I would like to know how can we include to our project the velocity.js library so we can have more smooth animations. Thanks!

index.html

<div class="demo-content">
        <div class="box" id="with-jquery">jQuery</div>
        <a href="#" class="play" id="play-jquery"><span class="ion ion-play"> 
</span>Play</a>

<div class="box" id="with-velocity">Velocity.js</div>
        <a href="#" class="play" id="play-velocity">
        <span class="ion ion-play"></span>Play</a>
</div>

script.js

function withAnimate() {
  $("#with-jquery").animate({
    left: "500px",
  }, {
    duration: 3000, 
    easing: "linear"
  } ); 
}

$("#play-jquery").on('click', function(){
  withAnimate();
});

function withVelocity() {
  $("#with-velocity").velocity({
    left: "500px",
  }, {
    duration: 3000, 
    easing: "linear"
  } );  
}

$("#play-velocity").on('click', function(){
  withVelocity();
});

Answer 1

You need to include velocity.js before velocity.ui.js

velocity.js is the core library and velocity.ui.js is a set of animations

I just fork your jsbin for a working sample