Make your website interactive using Velocity.js

Overview of Velocity JS

Velocity is an animation engine with the same API as jQuery’s $.animate(). It works with and without jQuery. It’s incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.


Compatibility of Velocity JS

Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, it mimics jQuery’s $.queue(), and thus interoperates seamlessly with jQuery’s $.animate(), $.fade(), and $.delay(). Since Velocity’s syntax is identical to $.animate(), your code doesn’t need to change.

Now, that you have an idea of what is Velocity.js. Let’s get started with it.


Reversing

To animate an element back to the values prior to its last Velocity call, pass in “reverse” as Velocity’s first argument.

Reverse defaults to the options (duration, easing, etc.) used in the element’s previous Velocity call. However, this can be overridden by passing in a new options object:

Example:

HTML
<div class="container">
  <p>Velocity.js</p>
  <div class="block"></div>
</div>
CSS
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 600px;
  margin: 100px auto 0;
  background: #f3f3f3;
  box-sizing: border-box;
  padding: 20px;
}

.container p {
  margin-bottom: 20px;
  font-family: sans-serif;
}

.container .block {
  display: block;
  height: 50px;
  width: 50px;
  background: #333;
  border-radius: 50%;
  margin-bottom: 20px;
}
JS
$block = $(".block"); // Setting up the Variable

$block.velocity({translateX: "510px", scale: 2, backgroundColor: "#999999"}, {duration: 1000}).velocity("reverse");
Output

Reversing Animation - Velocity JS
Click Here to View the Animation


Scrolling

To scroll the browser to the top edge of an element, pass in “scroll” as Velocity’s first argument (instead of a properties map). The scroll command behaves identically to a standard Velocity call; it can take options and it can be queued.

Example:

HTML
<div id="section1" class="block">
  <h2>Section 1</h2>
  <a href="#section2">GO TO THE NEXT PAGE</a>
</div>
<div id="section2" class="block">
  <h2>Section 2</h2>
  <a href="#section3">GO TO THE NEXT PAGE</a>
</div>
<div id="section3" class="block">
  <h2>Section 3</h2>
  <a href="#section4">GO TO THE NEXT PAGE</a>
</div>
<div id="section4" class="block">
  <h2>Section 4</h2>
  <a href="#section5">GO TO THE NEXT PAGE</a>
</div>
<div id="section5" class="block">
  <h2>Section 5</h2>
  <a href="#section1">GO TO THE MAIN PAGE</a>
</div>
CSS
* {
  margin: 0;
  padding: 0;
}

.block {
  height: 100vh;
  box-sizing: border-box;
  text-align: center;
  padding: 25%;
  color: #fff;
  font-family: sans-serif;
}

h2 {
  text-transform: uppercase;
  margin-bottom: 30px;
  font-size: 40px;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 20px;
  background: orange;
  color: #333;
  border-radius: 10px;
}

#section1 {
  background: #2b8087;
}

#section2 {
  background: #3b8b92;
}

#section3 {
  background: #4e989f;
}

#section4 {
  background: #61a9b0;
}

#section5 {
  background: #84c5cc;
}
JS
$('a[href^="#"]').on('click', function() {
    $(this.hash).velocity('scroll');
  });
Output

Scrolling Animation - Velocity JS
Click Here to View the Animation


Looping

Set the loop option to an integer to specify the number of times an animation should alternate between the values in the call’s property map and the element’s values prior to the call:

Example:

HTML
<div class="circle-border">
  <div class="circle"></div>  
</div>
CSS
.circle-border,
.circle-border .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.circle-border {
  height: 220px;
  width: 220px;
  border: 20px solid #34495e;
  border-spacing: 6px;
}

.circle-border .circle {
  height: 200px;
  width: 200px;
  background: #34495e;
}
JS
var $circle = $('.circle');

// Replace the "loop: 100" into "loop: true" to make it infinite.
$circle.velocity({backgroundColor: '#e74c3c'}, {loop: 10}, 5000).velocity({backgroundColor: '#f1c40f'}, {loop: 10}, 5000).velocity({backgroundColor: '#2ecc71'}, {loop: 10}, 5000);
Output

Looping Animation - Velocity JS
Click Here to View the Animation


Fading Elements

To fade an element, pass in “fadeIn” or “fadeOut” as Velocity’s first argument. The fade commands behaves identically to a standard Velocity call; they can take options and they can be queued.

Example:

HTML
<div class="container">
  <div class="block"></div>
  <div class="block gray"></div>
  <div class="block"></div>
  <div class="block gray"></div>
  <div class="block2 gray"></div>
  <div class="block2"></div>
  <div class="block2 gray"></div>
  <div class="block2"></div>
  <div class="block"></div>
  <div class="block gray"></div>
  <div class="block"></div>
  <div class="block gray"></div>
  <div class="block2 gray"></div>
  <div class="block2"></div>
  <div class="block2 gray"></div>
  <div class="block2"></div>
</div>
<a href="#">CLICK ME</a>
CSS
body {
  text-align: center;
}

.container {
  width: 400px;
  margin: 100px auto 50px;
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.container .block,
.container .block2 {
  height: 100px;
}

.container .block:nth-child(even) {
  background: #333;
}
.container .block:nth-child(odd) {
  background: #999;
}

.container .block2:nth-child(even) {
  background: #999;
}
.container .block2:nth-child(odd) {
  background: #333;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 20px 60px;
  background: orange;
  color: #333;
  border-radius: 10px;
  font-family: sans-serif;
}
JS
$block = $(".gray");

$("a").on("click", function(){
  $block.velocity("fadeOut", {display: "table"}, { duration: 1500 });
});

$("a").on("dblclick", function(){
  $block.velocity("fadeIn", {display: "table"}, { duration: 1500 });
});
Output

Fading Animation - Velocity JS
Click Here to View the Animation


Sequences

Sequence running is the UI pack’s solution to avoiding messy, nested animation code. For example, without the UI pack, this is the standard approach to consecutively animating separate elements:

Example:

HTML
<div class="container">
  <div class="circle"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
  <div class="circle4"></div>
  <div class="circle5"></div>
</div>
CSS
.container {
  width: 500px;
  height: 500px;
  margin: 100px auto 0;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

.container .circle,
.container .circle2,
.container .circle3,
.container .circle4,
.container .circle5 {
  height: 100px;
  background: #0094C6;
}
JS
var $circle = $('.circle'),
    $circle2 = $('.circle2'),
    $circle3 = $('.circle3'),
    $circle4 = $('.circle4'),
    $circle5 = $('.circle5');

$.Velocity.RunSequence([
  { e: $circle, p: { translateY: 300, borderRadius: '50%', backgroundColor: '#001242' }, o: {duration: 800, easing: 'linear', loop: 1}},
  { e: $circle2, p: { translateY: 300, borderRadius: '50%', backgroundColor: '#52489C' }, o: {duration: 800, easing: 'linear', loop: 1}},
  { e: $circle3, p: { translateY: 300, borderRadius: '50%', backgroundColor: '#E83E6B' }, o: {duration: 800, easing: 'linear', loop: 1}},
  { e: $circle4, p: { translateY: 300, borderRadius: '50%', backgroundColor: '#4BC6B9' }, o: {duration: 800, easing: 'linear', loop: 1}},
  { e: $circle5, p: { translateY: 300, borderRadius: '50%', backgroundColor: '#F4E409' }, o: {duration: 800, easing: 'linear', loop: 1}}
]);
Output

Sequences Animation - Velocity JS
Click Here to View the Animation


Conclusion

The purpose of this walkthrough has been to demonstrate Velocity’s consolidation of animation logic within your code. In short, Velocity is an expressive and efficient tool for crafting UI animations.

To explore the remainder of Velocity’s features, including color and transform animation, check out Velocity’s documentation at VelocityJS.org.

Share this: