Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Adding Animations to a Webpage using Velocity.js
Animations have become a very integral part of website interfaces in today's web development world. They help in enhancing the user experience of a website and in this article, we will learn how we can make use of Velocity.js to add beautiful animations to our web pages.
VelocityJS is a JavaScript animation engine that provides us with very fast performing animations that we can use in our web pages. It has become one of the leading animation engines and there are different reasons for its success. I have mentioned some of the most important reasons that make it a very good option to have when you decide to choose an animation engine for your web page.
Important Features of Velocity.js
Some of the important features of Velocity.js are listed below −
Better Performance − When it comes to speed, it is as fast as CSS and when compared to the main rival, i.e., jQuery, it delivers a better performance, especially on mobile devices. Once, there was also a discussion regarding the question, that jQuery core animations should be replaced by VelocityJS. Also, the other main point that works in its favour is that the CSS animations simply don't have enough browser support, whereas the VelocityJS animations are reliable as far back as IE8.
RunSequence − Think of runSequence as something that allows you to perform a stack of animations in a consecutive fashion, and it yields better results and is a more elegant approach than having to chaining multiple animation functions which you normally find in jQuery animations.
Learning Curve − The learning curve of Velocity.JS is not very steep, as someone who has a knowledge of jQuery can easily start with it, as it offers a similar syntax.
Now that we have a basic idea of Velocity.JS, let's try to create multiple different animations in order to understand how Velocity.JS animations work.
Adding Animations Using Velocity.js
The first thing that we require is to create a simple HTML-JS project, where the code for Velocity.JS will be written mainly in the JavaScript file and the HTML file will act as the starting point where we will import the Velocity.JS dependencies.
Create a file named index.html and script.js in your favourite code editor or IDE. Consider the command shown below that will help you create both the index.html and the script.js file.
touch index.html touch script.js
Note − If touch isn't working, then you can use the vi command.
index.html
Once these two files are created, the next step is to put the following code inside 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>
There are a few points that you need to focus on in the above code, the first being that you want to make sure that you are able to import the Velocity.JS files in your code. We are doing that inside the <body> tag in the above code.
Consider the code snippet shown below.
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
These two lines are allowing us to import both jQuery and Velocity.JS into the code, though we only require Velocity.JS, it's your call to import one or both. As it is fun to compare both Velocity and jQuery, hence I imported them both.
Now comes the part where we want to pick an element from our <body> tag and then use it to do some animations on it. 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 above code snippet, we can see that we have two different <body> tags, and in each of these tags, we have an <id> associated with it. We will use these ID's in our JavaScript code as with these id's, we will be able to get the Velocity element on which we can then do the animations.
script.js
Now, it's time that we write the code in script.js. The first thing that we will do is to use a simple Velocity object in which we will assign a specified width and height to the <p> tag using Velocity.js.
Consider the script.js code shown below.
let $element = $("#sample-p");
$element.velocity({ width: "50px", left: "500px" });
In the above code, we are specifying that we want the $element, which is simply pointing to the <p> tag of our HTML code to be of specified width and height.
When you run the HTML code, you should see the content of the <p> tag to be of specified width and height.
In the above example, we are making sure that the width of the <p> tag content becomes 500px, but let's say that after a certain delay, we want to make sure that the width of the <p> tag or our $element changes to say 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, then after a delay of 1 second, the width of our $element will change to 200px.
Adding Multiple Animations on a Single Element Using Velocity.js
So far, in both the examples, we learned how we can run simple animations with Velocity.JS. Now let's focus on the part where we want to run the multiple animations on a single element.
In case, we want to run multiple animations, we can either run them one by one, or chain them up, which will allow them to run in an order in which we define 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 above code, we have different animations that are chained after one another, and this is one of the more common patterns that you will find when you explore more of the Velocity.JS examples.
Adding Opacity Using Velocity.js
Now, let's discuss about a frequently used option in Velocity.JS, i.e., opacity. In the next example, we will explore how we can use opacity on an element with different options.
The first simple scenario would be to introduce the opacity 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 are making sure that element gets to 0 opacity, with a slow duration.
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 are making sure that element gets to 0 opacity, with a 5000ms duration.
We can also log the elements of the div and attached attributes once a particular animation is finished. 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 elements that will print the attached attribute and all the elements in the console.
Looping Effect using Velocity.js
Now let's see how you can get the Looping effect using Velocity.js. By looping, I want to say how you can do a certain animation in a particular loop, and you will have access to different properties of that loop, like how many times you want to execute the loop, at what delay, and so on.
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 above code, we are creating an animation that will make the "$element" item to be of 5em height and it will run in a loop for two times.
Now let's 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 have a delay as well. 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 above code, we are creating an animation that will make the "$element" item to be of 10em height and it will run in a loop for four times with a delay of 300ms when going back from one loop to another.
Fading Effect Using Velocity.js
Now let's see how you can get the Fading 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 above code, we are using the fadeIn and fadeOut options in Velocity.JS.
Conclusion
In this tutorial, we demonstrated how you can use Velocity.JS to add different animations in it with the help of multiple examples.
189 Views
