,

Advantages

• JavaScript animation make the immovable object to the movable.
• Used to develop the games.

How does Animation work in JavaScript?

Animation worked based on functions provided to animate the object. You can consider below frequently used functions for animation.

• setTimeout( function, time) : This function executes the operation after provided duration of milliseconds from now.
• setInterval(function, time): This function executes the operation after every provided duration of milliseconds.
• clearTimeout(time): This function executes for clears the any timer set by the setTimeout() functions.

JavaScript also used for set the number of attributes of any element and also includes its position on the screen. We can also set the top and the left attribute of an object to position this object on anywhere on the screen.

Syntax:

var var= setInterval(getMyFun, 5);
function getMyFun() {
if (condition) {
clearInterval(var);
} else {
//required logic
}
}

Note: We can also write our own custom functionality for our own animation.

Examples of JavaScript Animation

Below are the examples of Javascript Animation :

Example #1 – Moving the Image Right

Code:












Introduction to JavaScript Animation

Output:

After Clicking Move Right button:

Example #2 – Moving the content left

Code:












Introduction to JavaScript Animation

Output:

After Clicking the Move Left Button:

Example #3 – Mouse hover change Image

Code:










Introduction to JavaScript Animation

Output:

After hovering the cursor on to the Image

Conclusion

JavaScript animation is used to make the object movable or change its style. Animation can work with paragraph, header, images, footer or any html element tags. We can also apply time intervals to the application.

Recommended Articles

This is a guide to JavaScript Animation. Here we discuss how does Animation works in JavaScript along with respective programming examples. You may also have a look at the following articles to learn more –

1. JavaScript FileReader
2. JavaScript Get Element by Class
3. Email Validation in JavaScript
4. JavaScript String to Number

The post JavaScript Animation appeared first on EDUCBA.