JavaScript HTML DOM Animation

❮ Previous Next ❯

Discover how to make HTML animations with JavaScript.

A Basic Web Page

To show how you can make HTML animations using JavaScript, we'll use a basic webpage:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id="animation">My animation will go here</div>

</body>
</html>

Create an Animation Container

All animations must be in relation to a container element.

Example

<div id ="container">
<div id ="animate">My animation will go here</div>
</div>

Style the Elements

The box should be made using the style attribute as position: relative.

The animation part needs to be made using the style attribute with position: absolute.

Animation Code

In JavaScript, animations are created by coding step-by-step adjustments to how an element looks.

The modifications occur through a timer. If the timer's duration is short, the animation appears to flow seamlessly.

Here is the fundamental code:

Example

id = setInterval(frame, 5);

function frame() {
if (/* test for finished */) {
    clearInterval(id);
  } else {
    /* code to change the element style */
  }
}

Create the Full Animation Using JavaScript

<!Doctype html>
<html>
  <style>
    #container {
      width: 400px;
      height: 400px;
      position: relative;
      background: yellow;
    }

    #animate {
      width: 50px;
      height: 50px;
      position: absolute;
      background: red;
    }
  </style>
  <body>
    <h2>My First JavaScript Animation</h2>
    <div id="container">
      <div id="animate"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <style>
    #container {
      width: 400px;
      height: 400px;
      position: relative;
      background: yellow;
    }

    #animate {
      width: 50px;
      height: 50px;
      position: absolute;
      background-color: red;
    }
  </style>
  <body>
    <p>
      <button onclick="myMove()">Click Me</button>
    </p>
    <div id="container">
      <div id="animate"></div>
    </div>
    <script>
      function myMove() {
        let id = null;
        const elem = document.getElementById("animate");
        let pos = 0;
        clearInterval(id);
        id = setInterval(frame, 5);

        function frame() {
          if (pos == 350) {
            clearInterval(id);
          } else {
            pos++;
            elem.style.top = pos + "px";
            elem.style.left = pos + "px";
          }
        }
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JavaScript HTML DOM Animation

A Basic Web Page

Example

Create an Animation Container

Example

Style the Elements

Animation Code

Example

Create the Full Animation Using JavaScript

Web Development