In today's web development world, animations have become an integral part of website interfaces. They help to enhance the user experience of the website, and here's how to use Velocity.js to add beautiful animations to web pages.
VelocityJS is a JavaScript animation engine that provides us with very fast animations that can be used in web pages. It has become one of the leading animation engines and there are several reasons for its success. I have already mentioned some of the most important reasons that make it a very good choice when you decide to choose an animation engine for your web pages.
Important features of Velocity.js
Some of the important features of Velocity.js are listed below −
-
Better Performance - In terms of speed, it is as fast as CSS, and compared to its main competitor, jQuery, it offers better performance, especially on mobile devices. Once, it was also discussed that jQuery core animation should be replaced by VelocityJS. Also, another point in its favor is that CSS animations simply don't have enough browser support, whereas VelocityJS animations have been solid since IE8.
-
RunSequence - Think of runSequence as something that allows you to execute a bunch of animations in a sequential fashion, it yields better results and is a more efficient approach. This is an elegant approach compared to chaining multiple animation functions typically found in jQuery animations.
-
Learning Curve - The learning curve of Velocity.JS is not very steep as someone who knows jQuery can easily start using it as it provides a similar syntax.
Now that we understand the basic concepts of Velocity.JS, let's try creating a few different animations to understand how Velocity.JS animations work.
Add animation with Velocity.js
The first thing we need is to create a simple HTML-JS project where the code for Velocity.JS will be mostly written in JavaScript files and the HTML file will be our starting point for importing Velocity.JS dependencies.
Create files named index.html and script.js in your favorite code editor or IDE . Consider the commands shown below, which will help you create index.html and script.js files.
touch index.html
touch script.js
Note - if touch doesn't work then you can use vi command.
index.html
After creating these two files, the next step is to put the following code in your index.html file.
example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity - Examples</title>
</head>
<body>
<p id="sample-p">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
<button id="a-button">
Click me!
</button>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
<script>
$('#a-button').click(function() {
var $element = $("#sample-p");
$element.velocity({ width: "50px", left: "500px" });
});
</script>
</body>
</html>
In the above code, you need to pay attention to a few points, first you need to ensure that you can import the Velocity.JS file in the code. What we coded above
Do this within the tag.
Consider the code snippet shown below.
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
These two lines allow us to import jQuery and Velocity.JS into our code, although we only need Velocity.JS, you can call import either or both. Since it's interesting to compare Velocity and jQuery, I'm importing both.
Now we're going to start with
Markup to select an element and use it to do some animation. Consider the code snippet shown below.
<p id="sample-p">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
<button id="a-button">
Click me!
</button>
In the code snippet above, we can see that there are two different
tags, and within each tag, we have an associated with it. We'll use these ids in our JavaScript code, and like using these ids, we'll be able to get the Velocity element and then perform animations on it.
script.js
Now, we write our code in script.js. The first thing we're going to do is use a simple Velocity object where we'll use Velocity.js as
Labels are assigned the specified width and height.
Consider the script.js code shown below .
let $element = $("#sample-p");
$element.velocity({ width: "50px", left: "500px" });
In the code above, we specify the $element we want, which just points to the HTML code
markup to have the specified width and height.
When you run the HTML code, you should see
The tagged content has the specified width and height.
In the example above, we ensured that
The label content becomes 500px wide, but let's say after a certain delay we want to make sure
The width of the label or our $element changes to 200px. We can achieve the same with the help of the code shown below.
let $element = $("#sample-p");
$element.velocity({ width: "200px" }, { duration: 500, delay: 1000 });
Now, if we run the HTML file, after a delay of 1 second, the width of $element will change to 200px.
Add multiple animations on a single element with Velocity.js
In these two examples so far, we've learned how to run simple animations with Velocity.JS. Now let's focus on the part where we want to run multiple animations on a single element.
If we wanted to run multiple animations, we could run them one by one, or chain them, which would allow them to run in the order we defined the chaining. Consider the script.js code shown below.
let $element = $("#sample-p");
// chaining
$element
// makes the $element of height of 300px over 1000ms
.velocity({ height: 400 }, { duration: 1000 })
/* makes the $element to animate to the left position of
200px over 600ms after the width is finished animating */
.velocity({ top: 200 }, { duration: 600 })
// fading the element after it's done moving
.velocity({ opacity: 0 }, { duration: 200 });
In the code above we have different animations which are linked to each other, this is one of the more common patterns you'll find as you explore more Velocity.JS examples.
Adding Opacity Using Velocity.js
Now, let's discuss a common option in Velocity.JS, opacity. In the next example, we'll explore how to use opacity on elements with different options.
The first simple scenario is to introduce an opaque animation with a slow option. Consider the script.js code shown below .
let $element = $("#sample-p");
$element.velocity({ opacity: 0 }, { duration: "slow" });
In the above code, we ensure that the opacity of the element reaches 0, and the duration is slow.
In the next example, we can even decide the exact time delay at which we want the element to have 0 opacity. Consider the script.js code shown below .
let $element = $("#sample-p");
$element.velocity({ opacity: 0 }, { duration: 5000 });
In the above code, we ensure that the opacity of the element reaches 0, and the duration is slow.
In the next example, we can even decide the exact time delay at which we want the element to have 0 opacity. Consider the script.js code shown below .
let $element = $("#sample-p");
$element.velocity({ opacity: 0 }, { duration: 5000 });
In the above code, we ensure that the element has an opacity of 0 and a duration of 5000 milliseconds.
We can also record the div's element and attached properties once the specific animation is done. Consider the script.js code shown below.
let $element = $("#sample-p");
// opacity
$element.velocity({
opacity: 0
}, {
/* Log all the animated divs. */
complete: function(elements) { console.log(elements); }
});
In the above code we are printing the element which will print the attached attribute along with all elements in the console.
Loop Effects Using Velocity.js
Now let's see how to get looping effect using Velocity.js. By loop I mean how to execute a particular animation in a particular loop and you will have access to different properties of that loop like how many times to execute the loop, delay time etc.
Let's start with a very basic example. Consider the script.js code shown below.
let $element = $("#sample-p");
// looping
$element.velocity({ height: "5em" }, { loop: 2 });
In the code above, we create an animation that makes the "$element" item a height of 5em, and it will run in a loop twice.
Now suppose we want to run a similar example, but at the same time we want to make sure that when we loop back, we should also have a delay. Consider the script.js code shown below.
let $element = $("#sample-p");
// looping
$element.velocity(
{
height: "+=10em"
},
{
loop: 4,
/* Wait 300ms before alternating back. */
delay: 300
}
);
In the code above, we create an animation that makes the "$element" item a height of 10em, and it loops four times with a delay of 300ms when returning from one loop to the other.
Use Velocity.js to achieve fade effect
Now let's see how to get a fade effect using Velocity.JS. Consider the script.js code shown below.
let $element = $("#sample-p");
// fading
$element
.velocity("fadeIn", { duration: 1500 })
.velocity("fadeOut", { delay: 500, duration: 1500 });In the code above, we used the fadeIn and fadeOut options from Velocity.JS.
The above is that we have demonstrated how to use Velocity.JS to add different animations in it through multiple examples.