Have you ever thought of creating complex animations using CSS, well in JavaScript also there are some libraries which helps in creating animation and tasks that CSS also cannot perform. AS CSS animations are limited in functionality on the other hand JavaScript libraries are fast and reliable So, this article we will be learning about some of the best JavaScript animation libraries using which you can create animations in JavaScript. Let’ see some of the JavaScript animation libraries. Anime.js Anime.js is known as lightweight animation library which s use to animate HTML, JavaScript objects, CSS selectors and DOM attributes, arrays ... Read More

JavaScript's Location object provides access to the current URL's components. One can think of this object as a read-only window into the current location. There are two properties of the Location object that are often confused: host and hostname. Location.host The host property returns the hostname, port number, and protocol of the current URL. For example, if the current URL is "http://example.com:8080/path/to/page.html", the value of host would be "example.com:8080". Advantages of using location.host There are also a few advantages to using location.host over location.hostname. First, it is more specific. If you need the port number or protocol, you can be ... Read More

In this tutorial, we will be discussing how to design a digital clock in neumorphism style using JavaScript. Neumorphism is a new design trend that has been gaining popularity in recent years. It is characterized by soft, rounded shapes and subtle shadows. The HTML We will start by creating a basic HTML structure for our clock. We will need a container element, and within that, we will have an element for the clock face and another for the control buttons. Below is the HTML code for our clock − Start Stop ... Read More

Auto-formatting is one of those features that are hard to implement but at the same time increases the userexperience a lot. There are different JavaScript libraries that one can use when they want to auto-format the input text content, but the most popular of them is Cleave.js. Cleave.js is a JavaScript library that is mainly used when we want to format the input text content and it works very smoothly. It is very lightweight and easy to get started with. In this tutorial, we will take a couple of examples to demonstrate how you can use Cleave.js to autoformat input ... Read More

Tween.js is a JavaScript library that is mainly used when we want to tween or animate an HTML5 or JavaScript property. It can work standalone as well as when integrated with Easel.js. In this tutorial, we will learn how we can make use of Tween.js with the help of a few examples. Before we go on to the main example, let's first discuss a few simple tweens so that when we use them in the main example, you don't get overwhelmed. Simple Tween In this tween, we will tween the alpha property of the target from 0 to 1 for ... Read More

Handsontable is a JavaScript library that is used when we want to create a data grid. It provides a spreadsheet-like experience, pretty similar to Excel. In this tutorial, we will explain how you can use handsontable.js to create a data grid with your own data. In addition, we will see how to use different options available in handsontable.js. While there might be different spreadsheets like grid creators that you can use, the handsontable.js stands out from most of them because of its ability to work with vanilla JavaScript, React or Angular as well. Before you can start working with handsontable.js, ... Read More

Quill is a free and open-source text editor that falls under the category of WYSIWYG editors and is mainly built for the modern web that we use today. It is a highly customizable text editor and has many expressive API. Quill is very easy to use and provides a good interface that is even understandable to those that have worked on markup only. In this tutorial, we will take multiple examples to explain how you can build a text editor using Quill.js. While there are dozens of rich text editors that belong to the WYSIWYG text editors, the most widely ... Read More

It is a well-known fact that code is prone to errors, and sometimes even when we know that a particular workflow will work fine for some cases, there's a good chance that we forget about some other cases. In simple terms, it can be said that when we test a code manually, we might miss something. For example, suppose we have two functions, func1() and func2(), and we know that func1() works for the cases that we have defined in our test, but we found out that func2() doesn't work. Then we fix func2() but later forgot to check whether ... Read More

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 ... Read More

AOS.js (Animation on Scroll) is an animation-providing JavaScript library that makes it easier to add tons of animations by simply changing the name of the class in the div tag in which you want to add an animation. While there are different animation JavaScript libraries out there, AOS.js is probably the simplest of them. In this tutorial, we will explore different types of animations that we can use in AOS.js with the help of different examples. The first category of animations that we will explore are the fading one's. Before we do that, we first need to make sure that ... Read More