JavaScript Animation

In this article, we are going to discuss JavaScript animation with its functions.

What is JavaScript Animation?

JavaScript animations are done by incremental programming changes in the style of an element. JavaScript animations can perform tasks that CSS cannot. JavaScript could be used to transfer several DOM elements across the page in accordance with a logical equation or function. JavaScript includes the three functions mentioned below, which are commonly used in animation programs.

1. setTimeout (function, duration): This function can be used to call the function after a millisecond delay.
2. setInterval (function, duration): This function can be used to call the function after each duration milliseconds.
3. clearTimeout (setTimeout_variable): This function can be used to clear the timer that has been set by the setTimeout()

JavaScript can also modify a DOM object"s attributes, such as its location on the screen. An object"s top and left attributes can be set to place it anywhere on the frame. The syntax of JavaScript may be defined as:

Example:

Let"s take a basic example to understand how we can create a basic JavaScript Animation web page.

Output: After executing this code, we will get the output as shown below in the screenshot.

Styling the elements

Let"s take another example to show the animation by styling the elements. Here, we make a container element with the help of style = "position: relative" and make an animated element in the container element with the help of style = "position: absolute".

Example:

Output: After executing this code, we will get the output as shown below in the screenshot.

Example:

Let"s take another example to understand that how we can create an animation in JavaScript.

Output: After executing this code, we will get the output as shown below in the screenshot.

As we have above seen in the screenshot, there is a "Click Here" button. When we click on the button, the image is animated from the top left side corner to the bottom left side corner, as seen in the screenshot.

Manual Animation

Now, using the DOM object properties and JavaScript functions, let"s take a simple animation example.

Example:

Output: After executing this code, we will get the output as shown below in the screenshot.

As we have seen in the screenshot, there is a "Click Here" button. When we click on the button, the image is moves left to right at every click, as shown in the screenshot.

Explanation

1. To get a DOM object, we use the JavaScript function getElementById() and then allocate it to the global variable imgObj.
2. To initialize imgObj, we defined an initialization function init(), where we set its location and left attributes.
3. When the window loads, we call the initialization function.
4. Finally, we use the moveRight() function to add 10 pixels to the left To switch it to the left, we might set it to a negative value.

Automated Animation

In the previous example, we have seen how the image shifts to the right side of the screen with each click. We may automate this method by using the JavaScript function setTimeout(), which looks like this:

Example:

Let"s take an example to explain that how we may make a JavaScript automated animation.

Output: After executing the above code, we will get the output as shown below in the screenshot.

As we have seen in the above screenshot, there is a start and stop button. When we click on the start button, the image is animated to the right side. If we click on the stop button, the image is positioned in its original position.

Explanation:

In this example, we may add two another method that helps to make animation automated. These methods are as follows:

1. moveRight(): To set the position of imgObj, the moveRight() method calls the setTimeout()
2. Stop(): We"ve added a new function stop(), that resets the object to its original state and clears the timer set by the setTimeout()