- JavaScript Basics
- JavaScript Home
- JavaScript Syntax
- JavaScript Placements
- JavaScript Output
- JavaScript Statements
- JavaScript Keywords
- JavaScript Comments
- JavaScript Variables
- JavaScript var
- JavaScript let
- JavaScript const
- JavaScript var Vs let Vs const
- JavaScript Operators
- JavaScript Comparison/Logical
- JavaScript Data Types
- JS Conditional Statements
- JavaScript Conditional Statement
- JavaScript if Statement
- JavaScript if-else Statement
- JavaScript switch Statement
- JavaScript Loops
- JavaScript for Loop
- JavaScript while Loop
- JavaScript do-while Loop
- JavaScript Break Continue
- JavaScript Popup Boxes
- JavaScript Dialog Box
- JavaScript alert Box
- JavaScript confirm Box
- JavaScript prompt Box
- JavaScript Functions
- JavaScript Functions
- JS Function with Parameter
- JavaScript Return Statement
- JavaScript Variable Scope
- JavaScript setTimeout() Method
- JavaScript setInterval() Method
- JavaScript Events
- JavaScript Events
- JavaScript onclick Event
- JavaScript onload Event
- JavaScript Mouse Events
- JavaScript onreset Event
- JavaScript onsubmit Event
- JavaScript Objects
- JavaScript Objects
- JavaScript Number Object
- JavaScript Array Object
- JavaScript String Object
- JavaScript Boolean Object
- JavaScript Math Object
- JavaScript RegExp Object
- JavaScript Date Object
- JavaScript Browser Objects
- JavaScript Browser Objects
- JavaScript Window Object
- JavaScript Navigator Object
- JavaScript History Object
- JavaScript Screen Object
- JavaScript Location Object
- JavaScript Document Object
- JS Document Object Collection
- JS Document Object Properties
- JS Document Object Methods
- JS Document Object with Forms
- JavaScript DOM
- JavaScript DOM
- JavaScript DOM Nodes
- JavaScript DOM Levels
- JavaScript DOM Interfaces
- JavaScript Cookies
- JavaScript Cookies
- JavaScript Create/Delete Cookies
- JavaScript Advance
- JavaScript Regular Expression
- JavaScript Page Redirection
- JavaScript Form Validation
- JavaScript Validations
- JavaScript Error Handling
- JavaScript Exception Handling
- JavaScript try-catch throw finally
- JavaScript onerror Event
- JavaScript Multimedia
- JavaScript Animation
- JavaScript Image Map
- JavaScript Debugging
- JavaScript Browser Detection
- JavaScript Security
- JavaScript Misc
- JavaScript innerHTML
- JavaScript getElementById()
- JS getElementsByClassName()
- JS getElementsByName()
- JS getElementsByTagName()
- JavaScript querySelector()
- JavaScript querySelectorAll()
- JavaScript document.write()
- JavaScript console.log()
- JavaScript Programs
- JavaScript Programs
- JavaScript Test
- JavaScript Online Test
- Give Online Test
- All Test List
JavaScript Animation
Animation is a type of optical illusion where the rapid display of a sequence of images or frames of 2D or 3D artwork creates an illusion of movement. An animation movie or cartoon film is an example of animation.
Types of Animation
Animation can be divided into two categories given in the following table.
Animation Name | Description |
---|---|
Sprite Animation | Sprite animation defines a rectangular image in which the parts of the image are made transparent where you want to show the background. It has the ability to move an image over another image. |
Frame Animation | Frame animation allows you to create fast slide shows. In this animation, you can create a number of slides or frames by making small changes in each frame. As the slide sets are displayed in quick succession, therefore, the changes appears as motion. |
A high-quality animation contains the combination of both the animations, that is, the sprite animation and the frame animation.
Timing Functions to Create Animations
JavaScript provides timing functions to create animation which are listed here in the following table.
Function | Description |
---|---|
setTimeout(function, duration) | This function is used to execute the code sometime in the future |
setInterval(function, duration) | This function is used to execute the code after specified intervals of time |
clearTimeout(setTimeout_variable) | This function is used to clear the timer set by the setTimeout() function |
JavaScript Animations Example
Here is a simple animation example using JavaScript. This is manual animation example in JavaScript:
<html> <head> <title>JavaScript Manual Animation</title> <script type="text/javascript"> var image_object = null; function init() { image_object = document.getElementById('color1'); image_object.style.position= 'relative'; image_object.style.left = '0px'; } function moveRight() { image_object.style.left = parseInt(image_object.style.left) + 10 + 'px'; } window.onload =init; </script> </head> <body> <form> <img id="color1" src="color1.jpg" style="height:100px;weight:100px;"/> <p>Click on the <b>Animate</b> button to animate the image manually.</p> <input type="button" value="Animate" onclick="moveRight();" /> </form> </body> </html>
Here is the sample output produced by the above manual animation example code in JavaScript:

To animate the image, just click on the Animate button. After clicking on the Animate button, one time, the output will become as shown in the figure given below:

Now again click on the Animate button, the output will looks like:

Here is another example on animation using JavaScript:
<html> <head> <title>JavaScript Automatic Animation</title> <script type="text/javascript"> var image_object = null; var animate ; function initializn() { image_object = document.getElementById('image_1'); image_object.style.position= 'relative'; image_object.style.left = '0px'; } function moveRight() { image_object.style.left = parseInt(image_object.style.left) + 10 + 'px'; animate = setTimeout(moveRight,20); // call moveRight in 20msec } function stop() { clearTimeout(animate); image_object.style.left = '0px'; } window.onload = initializn; </script> </head> <body> <form> <img id="image_1" src="img1.jpg" style="height:100px;weight:100px;"/> <p>Click the <b>Start/Start Animation</b> to start and stop the animation effect.</p> <input type="button" value="Start Animation" onclick="moveRight();" /> <input type="button" value="Stop Animation" onclick="stop();" /> </form> </body> </html>
Here is the sample output produced by the above JavaScript animation (automatic animation) example code:

To start the animation effect, click on the Start Animation button, and to stop the animation effect, click on the Stop Animation button. Here is the live demo output of the above Animation example using JavaScript:
« Previous Tutorial Next Tutorial »