JavaScript animations are created by making incremental programming changes in the element’s style. These animations have the ability to perform the task that CSS can not do on its own. DOM is known as Document Object Model and the whole HTML document is represented by a document object.  According to the logical equation or function, you can move several DOM elements across the page using JavaScript.

In this post, you will learn about the basics related to JavaScript animation utilizing the simple example. So, let’s start!

Functions used for creating JavaScript Animation

In JavaScript, there are three functions are commonly used for creating animation.These are:

• setTimeout (function, duration): The global setTimeout() function sets a timer which executes a function or specified piece of code after some delay or duration.
• clearTimeout (setTimeout_variable): The clearTimeout() function is used to clear the timer that has been set by the setTimeout().
• setInterval (function, duration): The setInterval() function sets a timer which repeatedly executes a function or piece of code according to the specified duration.

Let’s take a simple example of creating JavaScript animation to understand how it works.

How to create a JavaScript Animation

In this example, we will create a JavaScript animation web page using HTML. To do so, first of all, we will create a HTML file named “Animation_JS.html”.

In this HTML file, we will add a button named “Move” and add two containers named “container” and “javascriptAnimation”. For the first “container”, we will set its properties such as height, width, position, background, border-radius, and display. Moreover, we will set its “position” as “relative” which indicates that this container is positioned normally.

Similarly, we will specify the values for the width, height, and background-color properties of the “javascriptAnimation” container, while setting its “position” as “absolute”. Upon doing so, this container will be positioned to its nearest ancestor:

Next, inside the <script> tag, we will define an “animation()” function that will be called when the user clicks the “Move” button. This “animation()” function will first fetch the “javascriptAnimation” HTML  element. Then, we will assign an “id” to the “clearInterval()” function, which invokes the “frame()” function after “5” milliseconds.

In the “frame()” function, the number of frames will be set per second. If the position of element reaches 305px, then the “clearInterval()” function clears it Otherwise the fetched HTML “javascriptAnimation” element will moves top and moves according to the “position” value:

Here is the snippet of the script code:

Execution of the above-given JavaScript program will show the following output:

Then click on “Move” button to view the created JavaScript animation:

That was all essential information related to JavaScript animation. You can further explore as required.

Conclusion

Animation is known as simulation of movement made by the series of Images. JavaScript animations are created by making small programming modifications to the style of an element. In JavaScript, you can create animations using the three most commonly used functions named setTimeout(), setInterval() and clearTimeout(). In this post, we have discussed JavaScript animation and its related functions with the help of a simple example.