27.4 C
HomeJavascriptAnimation using javascript

Animation using javascript

JavaScript does not have a function such as Java‟s sleep method that pauses a task for a specified period of time. However, JavaScript has two functions that can be used to delay the execution of a function.

  • setTimeout – Will execute a function a specific number of milliseconds in the future
  • setInterval – Will execute a function every millisecond 

Both functions take on two arguments:

  • Function – The first argument identifies the function to execute 
  • Time – The number of milliseconds 

setTimeout(someFunction,500); // The function will be executed 500 milliseconds

setInterval(someFunction,500); // The function will be executed 500 every milliseconds 

The use of the setTimeout is illustrated here by moving a tag across the screen. The int function setups the animation by retrieving a reference to the tag and calling the move function. The function move modifies the position of the tag and recursively schedules itself for future invocation.

function move() {
square.style.left = parseInt(square.style.left)+1+'px';
function init() {
square = document.getElementById('Square');
square.style.left = '0px';
Animation using javascript

The complete page follows:

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Animation</title>

            background-color: black;
        #Square {
            position: absolute;
            left: 0px;
            top: 8em;
            width: 5rem;
            height: 5rem;
            line-height: 3em;
            background: #99ccff;
            border: 1px solid #003366;
            white-space: nowrap;
            padding: 0.5em;


    <div id="Square">

        var square = null;

        function move() {
            square.style.left = parseInt(square.style.left) + 1 + 'px';
            setTimeout(move, 20);

        function init() {
            square = document.getElementById('Square');
            square.style.left = '0px';

        window.onload = init;


The same effect can be created using the setInterval function.

function move() {
square.style.left = parseInt(square.style.left)+1+'px';
function init() {
square = document.getElementById('Square');
square.style.left = '0px';


  1. What i do not understood is in reality how you are no longer actually a lot more neatly-favored than you might be now. You’re so intelligent. You recognize thus significantly in relation to this matter, produced me personally believe it from numerous numerous angles. Its like women and men are not involved until it is one thing to accomplish with Lady gaga! Your own stuffs outstanding. All the time handle it up!

  2. Thanks for another informative blog. Where else could I get that type of info written in such an ideal way? I’ve a project that I’m just now working on, and I have been on the look out for such information.

  3. What’s Going down i am new to this, I stumbled upon this I’ve discovered It positively useful and it has helped me out loads. I am hoping to give a contribution & assist other customers like its helped me. Great job.


Please enter your comment!
Please enter your name here

- Advertisment -spot_img

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Most Popular